# Dialog 对话框
在保留当前页面状态的情况下,告知用户并承载相关操作。
# 基本用法
Dialog 弹出一个对话框,适合需要定制性更大的场景。
:::demo 需要设置visible
属性,它接收Boolean
,当为true
时显示 Dialog。Dialog 分为两个部分:body
和footer
,footer
需要具名为footer
的slot
。title
属性用于定义标题,它是可选的,默认值为空。最后,本例还展示了before-close
的用法。
TIP
before-close
仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer
具名 slot 里添加了用于关闭 Dialog 的按钮,那么可以在按钮的点击回调函数里加入 before-close
的相关逻辑。
# 自定义内容
Dialog 组件的内容可以是任意的,甚至可以是表格或表单,下面是应用了 Element Table 和 Form 组件的两个样例。
TIP
center
仅影响标题和底部区域。Dialog 的内容是任意的,在一些情况下,内容并不适合居中布局。如果需要内容也水平居中,请自行为其添加 CSS。