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>
相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript