# Dialog 对话框

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

Dialog (opens new window)

# 基本用法

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

:::demo 需要设置visible属性,它接收Boolean,当为true时显示 Dialog。Dialog 分为两个部分:bodyfooterfooter需要具名为footerslottitle属性用于定义标题,它是可选的,默认值为空。最后,本例还展示了before-close的用法。

TIP

before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮,那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

# 自定义内容

Dialog 组件的内容可以是任意的,甚至可以是表格或表单,下面是应用了 Element Table 和 Form 组件的两个样例。

TIP

center 仅影响标题和底部区域。Dialog 的内容是任意的,在一些情况下,内容并不适合居中布局。如果需要内容也水平居中,请自行为其添加 CSS。