Dialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

基础用法

Dialog 弹出一个对话框，适合需要定制性更大的场景。

TIP

before-close 只会在用户点击关闭按钮或者对话框的遮罩区域时被调用。 如果你在 footer 具名插槽里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

自定义内容

对话框的内容可以是任何东西，甚至是一个表格或表单。 此示例显示如何在 Dialog 中使用 Element Plus 的表格和表单。

嵌套的 Dialog

如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。

居中布局

对话框的内容可以居中。

TIP

Dialog 的内容是懒渲染的——在被第一次打开之前，传入的默认 slot 不会被立即渲染到 DOM 上。 因此，如果需要对 DOM 进行操作，或通过 ref 获取相应的组件，请在 open 事件的回调中进行。

关闭时销毁

启用此功能时，默认栏位下的内容将使用 v-if 指令销毁。 当出现性能问题时，可以启用此功能。

可拖拽的 Dialog

试着拖动一下header部分吧

TIP

当设置 modal 属性为 false 时，请将 append-to-body 属性设置为 true，因为 Dialog 是通过 position: relative 来确定位置的。一旦移除了 modal 属性，Dialog 会基于当前的 DOM 元素来进行定位， 而不是基于 document.body，这会导致样式问题。

Dialog 属性

属性说明类型可选值默认值
model-value / v-model是否显示 Dialogboolean——
titleDialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入string——
widthDialog 的宽度string / number—50%
fullscreen是否为全屏 Dialogboolean—false
topDialog CSS 中的 margin-top 值string—15vh
modal是否需要遮罩层boolean—true
append-to-bodyDialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 trueboolean—false
lock-scroll是否在 Dialog 出现时将 body 滚动锁定boolean—true
custom-classDialog 的自定义类名string——
open-delayDialog 打开的延时时间，单位毫秒number—0
close-delayDialog 关闭的延时时间，单位毫秒number—0
close-on-click-modal是否可以通过点击 modal 关闭 Dialogboolean—true
close-on-press-escape是否可以通过按下 ESC 关闭 Dialogboolean—true
show-close是否显示关闭按钮boolean—true
before-close关闭前的回调，会暂停 Dialog 的关闭function(done)，done 用于关闭 Dialog——
draggable为 Dialog 启用可拖拽功能boolean—false
center是否让 Dialog 的 header 和 footer 部分居中排列boolean—false
destroy-on-close当关闭 Dialog 时，销毁其中的元素boolean—false

Dialog 插槽

插槽名说明
—Dialog 的内容
titleDialog 标题区的内容
footerDialog 按钮操作区的内容

Dialog 事件

事件名说明参数
openDialog 打开的回调—
openedDialog 打开动画结束时的回调—
closeDialog 关闭的回调—
closedDialog 关闭动画结束时的回调—
open-auto-focus输入焦点聚焦在 Dialog 内容时的回调—
close-auto-focus输入焦点从 Dialog 内容失焦时的回调—