当前位置：首页 > article >正文

vue3+element-plus中dialog对话框组件去掉遮罩层后可以操作底层页面，以及弹窗嵌套弹窗如何去掉遮罩层且可以操作底层页面

article 2025/1/18 13:01:26

一、去掉遮罩层

添加 :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，具体解释可以查看官网

Dialog 对话框 | Element Plus (gitee.io)

代码如下：

<el-dialog
    v-model="DialogVisilble"
    :width="360"
    title="示例"
    append-to-body
    :modal="false"
    :close-on-click-modal="false"
    modal-class="dialog_class"
  >

查看全文

http://www.kler.cn/a/272828.html