elementUI 多层dialog 嵌套遮罩问题处理（亲测有效）

在使用Element UI的多层Dialog时，可能会遇到遮罩(mask)的显示问题，尤其是当Dialog有相对应的z-index值时。以下是一个处理嵌套Dialog遮罩的示例代码：

<template>
  <div>
    <el-button @click="outerDialogVisible = true">打开外层Dialog</el-button>
    <el-dialog
      title="外层Dialog"
      :visible.sync="outerDialogVisible"
      :modal="false"
      @open="handleOuterOpen"
      @close="handleOuterClose">
      <el-button @click="innerDialogVisible = true">打开内层Dialog</el-button>
      <el-dialog
        title="内层Dialog"
        :visible.sync="innerDialogVisible"
        :modal="true">
        内层Dialog的内容
      </el-dialog>
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      outerDialogVisible: false,
      innerDialogVisible: false
    };
  },
  methods: {
    handleOuterOpen() {
      // 外层Dialog打开时，增加z-index值确保遮罩正常显示
      this.$nextTick(() => {
        const mask = document.querySelector('.el-dialog__wrapper .el-overlay');
        if (mask) {
          mask.style.zIndex = 1050; // 设置一个比内层Dialog更高的z-index值
        }
      });
    },
    handleOuterClose() {
      // 外层Dialog关闭时，恢复z-index值
      this.$nextTick(() => {
        const mask = document.querySelector('.el-dialog__wrapper .el-overlay');
        if (mask) {
          mask.style.zIndex = ''; // 清空z-index值，恢复默认
        }
      });
    }
  }
};
</script>

在这个示例中，我们定义了两个el-dialog组件，一个作为外层Dialog，另一个作为内层。外层Dialog的:modal属性设置为false，这样它的遮罩层不会遮挡内层Dialog。当外层Dialog打开时，通过handleOuterOpen方法调整遮罩层的z-index值，确保它能正确遮住其他元素，但不会遮住内层Dialog。当外层Dialog关闭时，通过handleOuterClose方法恢复遮罩层的z-index值。这样可以避免嵌套Dialog时遮罩问题。