需求:页面弹出dialog对话框后,可以正常操作底层页面
一、去掉遮罩层
添加 :modal="false"、:close-on-click-modal="false" 两个属性去掉遮罩层
<el-dialog
v-model="DialogVisilble"
:width="360"
title="示例"
:modal="false"
:close-on-click-modal="false"
>
二、正常操作底层页面
当添加上述的属性后,发现仍然无法正常操作底层页面,这时我们需要添加如下代码:
<el-dialog
v-model="DialogVisilble"
:width="360"
title="示例"
:modal="false"
:close-on-click-modal="false"
modal-class="kk-dialog-class"
>
其中 kk-dialog-class 是自定义类名,和下面代码中的类名相同即可
.kk-dialog-class {
pointer-events: none;
}
.el-dialog {
pointer-events: auto;
}
上述CSS配置要放在没有scoped修饰的style标签里,如App.vue组件或全局CSS样式文件中