Dialog 对话框

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

基础用法

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

TIP

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

自定义内容

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

自定义头部

header 可用于自定义显示标题的区域。 为了保持可用性,除了使用此插槽外,使用 title 属性,或使用 titleId 插槽属性来指定哪些元素应该读取为对话框标题。

嵌套的对话框

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

内容居中

标题和底部可水平居中

TIP

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

关闭时销毁

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

可拖拽对话框

试着拖动一下header部分吧

TIP

modal 的值为 false 时,请一定要确保 append-to-body 属性为 true,由于 Dialog 使用 position: relative 定位,当外层的遮罩层被移除时,Dialog 则会根据当前 DOM 上的祖先节点来定位,因此可能造成定位问题。

属性

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

插槽

插槽名说明
Dialog 的内容
header对话框标题的内容;会替换标题部分,但不会移除关闭按钮。
title(废弃)与 header 作用相同 请使用 header
footerDialog 按钮操作区的内容

事件

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

源代码

组件文档

贡献者