Bootstrap

vue3+element-plus中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="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"
  >

;