前端element-ui两层dialog嵌套遮罩层消失的问题解决办法

目录

• 背景
• 问题
• 解决思路
• 题外话
• 总结

<el-dialog>
...
    <el-dialog>
    </el-dialog>
</el-dialog>

<el-dialog ref="dialog1">
...
    <el-tab>
        ...
            <el-dialog ref="dialog2">
            </el-dialog>
    <el-tab>
</el-dialog>

      // 解决dialog嵌套，从第二层返回后，遮罩层消失的问题
      addModalDivIfNotExists() {
        // 获取dialog的父级div
        const parentDiv = this.$refs.parentDiv;
        // 获取dialog
        const dialog = this.$refs.dialog
        // 检查是否已存在class为"v-modal"的div
        const existingModalDiv = parentDiv.querySelector('.v-modal');
        if (!existingModalDiv) {
          // 如果不存在，则创建一个新的div
          const newModalDiv = document.createElement('div');
          newModalDiv.classList.add('v-modal');
          // 设置z-index
          const parentZIndex = dialog.$el.style.zIndex
          newModalDiv.style.zIndex = Number(parentZIndex) - 1
          // 将新的div添加到父级div中
          parentDiv.appendChild(newModalDiv);
        }
      },