Dialog 对话框
基于element-plus dialog组件的二次封装。
基础用法
异步加载提示
属性
| 属性 | 说明 | 类型 | 默认值 | 是否拓展 |
|---|---|---|---|---|
| model-value / v-model | 是否显示 Dialog | boolean | false | 否 |
| cancel-text | 取消操作按钮文案；传空字符串隐藏按钮；缺省走 locale 兜底（见快速开始-国际化） | string | 取消（locale 兜底） | 是 |
| confirm-text | 确认操作按钮文案；传空字符串隐藏按钮；缺省走 locale 兜底（见快速开始-国际化） | string | 确认（locale 兜底） | 是 |
| loading | 异步加载展示层 | boolean | false | 是 |
| width | 对话框的宽度，Element Plus 默认为 50%，本组件固定为 800 | enum | 800 | 是 |
| destroy-on-close | 当关闭 Dialog 时，销毁其中的元素 | boolean | true | 是 |
| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | false | 是 |
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean | false | 是 |
| title | Dialog 对话框的标题，也可通过具名 slot 传入 | string | '' | 否 |
| fullscreen | 是否为全屏 Dialog | boolean | false | 否 |
| top | dialog CSS 中的 margin-top 值，默认为 15vh | string | '' | 否 |
| modal | 是否需要遮罩层 | boolean | true | 否 |
| modal-class | 遮罩的自定义类名 | string | — | 否 |
| append-to-body | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true | boolean | false | 否 |
| append-to | Dialog 挂载到哪个 DOM 元素，将覆盖 append-to-body (版本: 2.4.3) | string | body | 否 |
| lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | true | 否 |
| open-delay | dialog 打开的延时时间，单位毫秒 | number | 0 | 否 |
| close-delay | dialog 关闭的延时时间，单位毫秒 | number | 0 | 否 |
| show-close | 是否显示关闭按钮 | boolean | true | 否 |
| before-close | 关闭前的回调，会暂停 Dialog 的关闭。回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候。 | Function | — | 否 |
| draggable | 为 Dialog 启用可拖拽功能 | boolean | false | 否 |
| overflow | 拖动范围可以超出可视区 | boolean | false | 否 |
| center | 是否让 Dialog 的 header 和 footer 部分居中排列 | boolean | false | 否 |
| align-center | 是否水平垂直对齐对话框 | boolean | false | 否 |
| close-icon | 自定义关闭图标，默认 Close | enum | — | 否 |
| z-index | 和原生的 CSS 的 z-index 相同，改变 z 轴的顺序 | number | — | 否 |
| header-aria-level | header 的 aria-level 属性 | string | 2 | 否 |
插槽
| 插槽名 | 说明 | 类型 |
|---|---|---|
| — | Dialog 的内容 | - |
| header | 对话框标题的内容；会替换标题部分，但不会移除关闭按钮。 | - |
| footer | Dialog 按钮操作区的内容 | - |
事件
本组件支持 Element Plus Dialog 的所有原生事件，所有事件会自动透传到底层的 el-dialog 组件。
扩展事件：
| 事件名 | 说明 | 类型 | 是否拓展 |
|---|---|---|---|
| cancel | 点击取消按钮后关闭对话框并触发 | Function | 是 |
| confirm | 点击确认按钮后触发，不自动关闭对话框，由 v-model 控制 | Function | 是 |
Element Plus 原生事件示例：
| 事件名 | 说明 | 类型 |
|---|---|---|
| open | Dialog 打开的回调 | Function |
| opened | Dialog 打开动画结束时的回调 | Function |
| close | Dialog 关闭的回调 | Function |
| closed | Dialog 关闭动画结束时的回调 | Function |
| open-auto-focus | 输入焦点聚焦在 Dialog 内容时的回调 | Function |
| close-auto-focus | 输入焦点从 Dialog 内容失焦时的回调 | Function |
💡 多版本兼容：支持 Element Plus 2.x 所有版本，包括未来新增的事件也会自动可用。