Dialog 对话框

EasyDialog 是一个基于 Element Plus 的命令式对话框工具，支持函数式调用、组件载入、状态继承、异步操作等特性。

在线演示

基础用法

高级用法

<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>

表单弹窗组件

<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

函数签名

EasyDialog(
  component: Component, // 组件
  componentProps?: object, // 组件属性
  modalProps?: DialogOptions, // 对话框属性
  context?: object //  应用上下文
): Promise<any>

DialogOptions

参数	说明	类型	默认值
title	对话框标题	string	'提示'
confirmButtonText	确认按钮文字	string	'确 认'
cancelButtonText	取消按钮文字	string	'取 消'
showConfirmButton	是否显示确认按钮	boolean	true
showCancelButton	是否显示取消按钮	boolean	true
methodKey	确认时调用组件的方法名	string	'submit'
beforeClose	关闭前回调	(done) => void	—
onConfirm	确认回调	(instance) => void | Promise<void>	—
onCancel	取消回调	() => void	—
footer	自定义页脚渲染函数	({ close, confirm, loading }) => VNode	—
draggable	是否可拖拽	boolean	true
...dialogProps	其他原生 Dialog 属性	—	—

返回值

返回一个 Promise：

• resolve: 用户点击确认按钮
• reject: 用户点击取消按钮或关闭对话框

特性说明

1. 简单提示: 使用字符串内容
2. 复杂内容: 使用组件载入
3. 数据交互: 通过 props 传递数据，通过 defineExpose 暴露方法
4. 异步操作: 在 onConfirm 或组件方法中使用 async/await
5. 流程控制: 利用 Promise 实现连续弹窗或条件弹窗