一、去掉遮罩层
添加 :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="dialog_class"
>
其中 dialog_class 是自定义类名,和下面代码中的类名相同即可
.dialog_class {
pointer-events: none;
}
.el-dialog {
pointer-events: auto;
}
三、如果是弹窗嵌套弹窗,以上方法可能不会去掉遮罩层,这时就需要添加官网给出的另一个属性:append-to-body
<el-dialog
v-model="DialogVisilble"
:width="360"
title="示例"
append-to-body
:modal="false"
:close-on-click-modal="false"
modal-class="dialog_class"
>