vue-pc端elementui-统一修改问题-Dialog 对话框点击空白关闭问题-element-所有组件层级问题

在Vue项目中使用Element UI时，如果你想要修改Dialog组件的默认行为，使其在点击空白处关闭，你可以通过监听全局的点击事件并判断点击的是否为Dialog外的元素来实现。

以下是一个简单的例子，展示如何在Vue组件中实现这一功能：

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    @open="handleDialogOpen"
    @close="handleDialogClose"
  >
    <!-- Dialog 内容 -->
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      isClickedOutside: false,
    };
  },
  methods: {
    handleDialogOpen() {
      // 监听全局点击事件
      document.addEventListener('click', this.checkClickOutside, true);
    },
    handleDialogClose() {
      // 移除监听事件
      document.removeEventListener('click', this.checkClickOutside, true);
    },
    checkClickOutside(event) {
      const dialogRef = this.$refs.myDialog; // 假设你的 Dialog 设置了 ref="myDialog"
      if (!dialogRef || dialogRef.contains(event.target)) {
        // 点击在 Dialog 内部，不做处理
        this.isClickedOutside = false;
      } else {
        // 点击在 Dialog 外部
        this.isClickedOutside = true;
        // 在下一个事件循环中关闭 Dialog
        this.$nextTick(() => {
          if (this.isClickedOutside) {
            this.dialogVisible = false;
          }
        });
      }
    },
  },
};
</script>

在这个例子中，我们监听了document的点击事件，并在checkClickOutside方法中判断了点击事件的目标是否位于Dialog外部。如果是，我们在下一个事件循环中通过设置dialogVisible为false来关闭Dialog。这里使用了this.$nextTick来确保在Dialog关闭前完成所有的DOM更新。