在写弹框嵌套时我们需要添加append-to-body属性,否则后弹出的框就会有遮盖层遮挡,如下图
我们想改变某个弹窗的原来样式,通常是在该弹框外包一个div,然后修改该div下的dialog样式,但是添加append-to-body属性为true后,Dialog 将插入 body 元素上,也就是说它并不在该div元素之下了,因此修改无效。
在dilog组件上定义class类,然后修改该类下的dialog本来的样式,这样就没有问题了
html
<div class="inform">
<el-dialog
:visible.sync="dialogVisible"
width="800px">
<div class="dialogBox">
第一层弹框内容
</div>
</el-dialog>
</div>
//嵌套的弹框
<el-dialog
:visible.sync="iframeVisible"
width="600px"
append-to-body
class="iframe-dialog">
<div class="dialogBox">
第二层弹框内容
</div>
</el-dialog>
css
<style lang="scss" scoped="scoped">
/deep/.iframe-dialog .el-dialog__header{
padding: 0 !important;
}
/deep/.iframe-dialog .el-dialog__body{
padding: 0 !important;
}
</style>