template
点击打开 Dialog
title="提示":visible.sync="dialogVisible"width="80%"
:append-to-body="true"
:before-close="handleClose":close-on-click-modal="false">
这是一段信息
取 消
确 定
data
dialogVisible:false,
methods
closeShadow(){this.dialogVisible=false;
},
handleClose(done) {this.$confirm('确认关闭？')
.then(_=>{
done();
})
.catch(_ =>{});
}
close-on-click-modal：是否可以通过点击 modal 关闭 Dialog 默认值为true
另外上面有一个属性还比较有用：
:modal-append-to-body='true' 是否将遮罩层添加在body元素里，如果为false就是插在el-dialog的父级元素里，
那么当我们遇到，弹窗里有弹窗，而且里面的弹窗没有遮罩层的z-index属性大时，就会出现里面弹层内的内容被遮罩层挡住的问题，如果我们让遮罩层加在body上，有点不好控制z-index属性，如果让加在el-dialog的父元素里，我们在当前组件就可以控制这一个遮罩成的z-index属性，
.thisDialog{z-index:200 !important;
}.app-container >>> .v-modal{z-index:199 !important;
}
。
