dialog element 删掉标题_Dialog 对话框

Dialog 对话框

Dialog 对话框

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

基本用法

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

点击打开 Dialog

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

点击打开 Dialog

title="提示"

:visible.sync="dialogVisible"

width="30%"

:before-close="handleClose">

这是一段信息

取 消

确 定

export default {

data() {

return {

dialogVisible: false

};

},

methods: {

handleClose(done) {

this.$confirm('确认关闭？')

.then(_ => {

done();

})

.catch(_ => {});

}

}

};

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

自定义内容

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

打开嵌套表格的 Dialog打开嵌套表单的 Dialog