Dialog设置遮罩穿透

1. 场景

el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作，比如一个弹窗打开了，我要能控制弹窗后面的滚动、点击等等一系列事件。

2. 解决方案

一、去掉遮罩层
添加 :modal=”false”、:close-on-click-modal=”false” 两个属性去掉遮罩层

1
2
3
4
5
6
7
    <el-dialog
        v-model="DialogVisilble"
        :width="360"
        title="示例"
        :modal="false"
        :close-on-click-modal="false"
></el-dialog>

二、正常操作底层页面
当添加上述的属性后，发现仍然无法正常操作底层页面，这时我们需要添加如下代码：
1
2
3
4
5
6
7
8
<el-dialog
    v-model="DialogVisilble"
    :width="360"
    title="示例"
    :modal="false"
    :close-on-click-modal="false"
    modal-class="kk-dialog-class"
></el-dialog>

其中 kk-dialog-class 是自定义类名，和下面代码中的类名相同即可
1
2
3
4
5
6
7
8
.kk-dialog-class {
  pointer-events: none;
}
 
.el-dialog {
  pointer-events: auto;
}