如何设置Element UI的Dialog弹窗允许点击背景内容

Element UI的Dialog组件默认会阻止用户与背景内容的交互。本文介绍一种简单方法来实现打开弹窗的同时仍能操作背景页面内容的功能。

实现方法

1. HTML结构

首先，需要在el-dialog上设置modal-class属性：

<template>
  <div>
    <el-dialog
      :modal="false"
      width="450px"
      title="弹窗标题"
      modal-class="my-dialog-modal"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      @open="handleOpen"
    >
      <!-- 弹窗内容 -->
    </el-dialog>
  </div>
</template>

2. CSS设置（关键部分）

在样式中，使用如下结构（注意不需要scoped）：

<style lang="less">
.当前页面组件名 {
    
    
  .my-dialog-modal {
    
    
    pointer-events: none;
    
    :deep(.el-dialog) {
    
    
      pointer-events: auto;
    }
  }
}
</style>

例如，如果你的组件名为CustomPage，则样式应为：

<style lang="less">
.custom-page {
    
    
  .my-dialog-modal {
    
    
    pointer-events: none;
    
    :deep(.el-dialog) {
    
    
      pointer-events: auto;
    }
  }
}
</style>

3. 重要属性说明

• :modal="false" - 设置为false，不显示遮罩层
• modal-class="my-dialog-modal" - 为弹窗的外层容器指定类名
• :close-on-click-modal="false" - 防止点击空白处关闭弹窗

4. 注意事项

• 不要添加append-to-body属性
• 样式文件中不使用scoped，确保样式能正确应用
• 确保组件名和modal-class名称匹配你的实际应用

工作原理

通过CSS的pointer-events属性控制鼠标事件：

• 对Dialog的外层容器设置pointer-events: none使其不响应鼠标事件
• 对Dialog本身设置pointer-events: auto恢复其鼠标事件响应能力

这样，用户既可以与弹窗交互，又能操作弹窗背后的页面内容。

参考链接