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

不吃香菜的猪2025-04-03 8:16

复制代码

: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>