el-dialog实现遮罩层后面的内容也能点击

复制代码
:modal="false" // 关闭遮罩层
:close-on-click-modal="false" // 是否可以通过点击 modal 关闭 Dialog   

最后设置样式
.el-dialog__wrapper {
  pointer-events: none;

  ::v-deep .el-dialog {
    pointer-events: auto;
  }
}

完整示例:

html 复制代码
<!--
 * @Description: 详情 弹窗
 * @Author: mhf
 * @Date: 2025/4/2
-->
<template>
  <el-dialog
    width="600px"
    v-dialog-out
    append-to-body
    v-if="dialogVisible"
    :title="title"
    :visible="dialogVisible"
    :before-close="hideDialog"
    :close-on-click-modal="false"
    :modal="false"
  >
    <div class="dialog-body">
      详情
    </div>

    <lineH />
    <div class="dialog-footer">
      <el-button @click="hideDialog">取 消</el-button>
      <el-button type="primary" @click="validateForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "resourceDetailsDialog",
  components: {},
  props: {},
  dicts: [],
  data() {
    return {
      dialogVisible: false,
      title: ""
    };
  },
  methods: {
    showDialog(data) {
      this.dialogVisible = true;
      this.title = data.title;
      if (data.data) {
        this.getTableData(data.data);
      }
    },

    hideDialog() {
      this.dialogVisible = false;
    },

    validateForm() {
    },

    getTableData(data) {
      console.log(data, "获取表格数据");
    }
  },
  created() {
  },
  mounted() {
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 20px 0 0 !important;
}

.dialog-body {
  padding: 0 20px;
  max-height: 65vh;
  overflow-y: auto;
}

.dialog-footer {
  text-align: center;
  padding: 10px 0 18px;
}

.el-dialog__wrapper {
  pointer-events: none;

  ::v-deep .el-dialog {
    pointer-events: auto;
  }
}
</style>
相关推荐
roman_日积跬步-终至千里12 小时前
【系统架构设计(25)】Web应用服务器与现代架构
前端·架构·系统架构
yshhuang12 小时前
在Windows上搭建开发环境
前端·后端
littleplayer12 小时前
Redux在iOS中的使用
前端
跟橙姐学代码12 小时前
Python里的“管家婆”:带你玩转os库的所有神操作
前端·python·ipython
jingling55512 小时前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
UrbanJazzerati12 小时前
可拖拽的进度条组件实战:实现思路与Demo
前端·面试
Cache技术分享13 小时前
188. Java 异常 - Java 异常处理规范
前端·后端
不一样的少年_13 小时前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
一枚前端小能手13 小时前
🔥 滚动监听写到手抽筋?IntersectionObserver让你躺平实现懒加载
前端·javascript
我是日安13 小时前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js