Dialog

EasyDialog is an imperative dialog tool based on Element Plus, supporting functional calls, component loading, state inheritance, async operations, etc.

Online Demo

基础用法

高级用法

<template>
  <div class="dialog-demo">
    <h3>基础用法</h3>
    <div class="button-group">
      <el-button @click="openSimple">纯文本弹窗</el-button>
      <el-button type="success" @click="openForm">表单弹窗</el-button>
    </div>

    <h3>高级用法</h3>
    <div class="button-group">
      <el-button type="warning" @click="openCustomFooter">自定义页脚</el-button>
      <el-button type="danger" @click="openBeforeClose">关闭前拦截</el-button>
    </div>

    <div v-if="result" class="result"><strong>操作结果：</strong>{{ result }}</div>
  </div>
</template>

<script setup>
import { h, ref } from "vue"
import { EasyDialog } from "easy-elplus"
import { ElButton, ElMessage, ElMessageBox } from "element-plus"
import DialogFormContent from "./DialogFormContent.vue"

const result = ref("")

// 简单文本弹窗
const openSimple = () => {
  EasyDialog("这是一个简单的提示信息，点击确认即可关闭。")
    .then(() => {
      result.value = "用户点击了确认"
    })
    .catch(() => {
      result.value = "用户取消了操作"
    })
}

// 表单弹窗
const openForm = () => {
  EasyDialog(
    DialogFormContent,
    {}, // 组件 props
    {
      title: "填写信息",
      width: "500px",

      // 可以在 onConfirm 中获取组件实例并调用其方法
      onConfirm: async instance => {
        instance.doSomethingInternal()
        const data = await instance.validateForm()
        result.value = `校验通过: 姓名: ${data.name}, 邮箱: ${data.email}`
        ElMessage.success("提交成功")
      }
    }
  ).catch(e => {
    if (e === "closed") return
    ElMessage.warning("表单校验失败")
  })
}

// 自定义页脚
const openCustomFooter = () => {
  EasyDialog(
    "这个弹窗使用了自定义页脚",
    {},
    {
      title: "自定义页脚",
      footer: ({ close, confirm, loading }) =>
        h("div", { style: "display: flex; justify-content: space-between; width: 100%" }, [
          h("span", { style: "color: #999; font-size: 13px" }, "自定义提示信息"),
          h("div", { style: "display: flex; gap: 10px" }, [
            h(ElButton, { onClick: close, size: "small" }, () => "取消"),
            h(
              ElButton,
              {
                type: "primary",
                loading: loading,
                onClick: confirm,
                size: "small"
              },
              () => "确认"
            )
          ])
        ])
    }
  )
}

// 关闭前拦截
const openBeforeClose = () => {
  EasyDialog(
    "尝试关闭此弹窗会触发二次确认",
    {},
    {
      title: "关闭前拦截",
      beforeClose: done => {
        ElMessageBox.confirm("确定要关闭吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(() => {
            done()
            result.value = "用户确认关闭"
          })
          .catch(() => {
            result.value = "用户取消关闭"
          })
      }
    }
  )
}
</script>

<style scoped>
h3 {
  margin: 20px 0 10px;
  font-size: 16px;
  color: #303133;
}

.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.result {
  margin-top: 20px;
  padding: 12px;
  background: #f0f9ff;
  border: 1px solid #409eff;
  border-radius: 4px;
  color: #409eff;
  font-size: 14px;
}
</style>

Form Dialog Component

<template>
  <el-form ref="formRef" :model="formData" label-width="80px">
    <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
      <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
    </el-form-item>
    <el-form-item
      label="邮箱"
      prop="email"
      :rules="[
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ]"
    >
      <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from "vue"
import { ElForm, ElFormItem, ElInput } from "element-plus"

const formRef = ref(null)
const formData = reactive({
  name: "",
  email: ""
})

// 暴露给外部的方法
const validateForm = async () => {
  if (!formRef.value) return
  await formRef.value.validate()
  return formData
}

const resetForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
}

// 模拟一个内部业务方法
const doSomethingInternal = () => {
  console.log("组件内部方法被调用了", formData)
  return "Internal Result"
}

defineExpose({
  validateForm,
  resetForm,
  doSomethingInternal,
  // 如果配合 EasyDialog 默认行为，可以暴露 submit 方法
  submit: validateForm
})
</script>

API

Function Signature

EasyDialog(
  component: Component, // component
  componentProps?: object, // component props
  modalProps?: DialogOptions, // dialog props
  context?: object //  app context
): Promise<any>

DialogOptions

Attribute	Description	Type	Default
title	Dialog title	string	'Tip'
confirmButtonText	Confirm button text	string	'Confirm'
cancelButtonText	Cancel button text	string	'Cancel'
showConfirmButton	Whether to show confirm button	boolean	true
showCancelButton	Whether to show cancel button	boolean	true
methodKey	Component method name to call on confirm	string	'submit'
beforeClose	Callback before closing	(done) => void	—
onConfirm	Confirm callback	(instance) => void | Promise<void>	—
onCancel	Cancel callback	() => void	—
footer	Custom footer render function	({ close, confirm, loading }) => VNode	—
draggable	Whether it's draggable	boolean	true
...dialogProps	Other native Dialog props	—	—

Return Value

Returns a Promise:

• resolve: User clicks confirm button
• reject: User clicks cancel button or closes the dialog

Features

1. Simple Prompt: Use string content
2. Complex Content: Use component loading
3. Data Interaction: Pass data via props, expose methods via defineExpose
4. Async Operations: Use async/await in onConfirm or component methods
5. Flow Control: Use Promise to implement sequential dialogs or conditional dialogs