Element Drawer嵌套时关闭第二个遮罩未消失

Question

在使用 Element UI 的 Drawer 组件进行嵌套时，常出现关闭第二个（内层）Drawer 后，背景遮罩层未随之一同消失的问题。该问题多因内外层 Drawer 的层级管理与 mask-close 事件冲突导致，关闭内层抽屉时，外层仍保留遮罩状态，造成界面卡死或交互阻塞。此现象影响用户体验，需通过手动控制 visible 属性或监听 close 事件干预遮罩行为来解决。

Answer 1

Element UI 嵌套 Drawer 遮罩层残留问题深度解析与解决方案

1. 问题现象描述

在使用 Element UI 的 <el-drawer> 组件进行嵌套时，常出现关闭内层（第二个）Drawer 后，背景遮罩层（mask）未随之一同消失的现象。用户虽然看到抽屉已关闭，但页面仍处于不可点击状态，交互被阻塞。

此问题通常发生在以下场景：

• 从主页面打开第一个 Drawer（外层）
• 在第一个 Drawer 内部触发第二个 Drawer（内层）的显示
• 关闭内层 Drawer 后，遮罩层仍然存在
• 此时外层 Drawer 正常显示，但无法操作任何元素

2. 根本原因分析

该问题的核心在于 Element UI 对多个 el-drawer 实例的层级管理机制与遮罩层事件处理逻辑存在冲突。具体表现为：

1. 层级堆叠（z-index）管理不当：每个 Drawer 实例会动态创建一个全屏遮罩层，其 z-index 由内部计数器控制。当嵌套打开时，若未正确递增或释放层级，会导致遮罩层残留。
2. mask-close 事件监听冲突：关闭内层 Drawer 时，其 mask 被移除，但外层 Drawer 的 mask 状态未被重新评估，导致 DOM 中仍保留一个不可见但实际生效的遮罩 div。
3. visible 属性与状态同步延迟：Vue 的响应式系统在异步更新中可能造成 :visible.sync 或 v-model 未能及时通知组件重绘遮罩状态。

3. 解决方案路径对比

方案编号	解决方式	适用场景	复杂度	是否推荐
1	手动控制 visible 属性	简单嵌套结构	低	✅
2	监听 close 事件并强制更新	多层嵌套	中	✅
3	使用 $nextTick 强制重绘	异步数据加载	中高	⚠️
4	封装统一 Drawer 管理器	大型项目/通用组件库	高	✅✅
5	CSS 强制隐藏残留 mask	临时修复	低	❌

4. 典型代码示例

<template>
  <div>
    <el-button @click="outerVisible = true">打开外层抽屉</el-button>

    <el-drawer
      title="外层抽屉"
      :visible.sync="outerVisible"
      size="50%"
      :with-header="true">
      
      <el-button @click="innerVisible = true">打开内层抽屉</el-button>

      <el-drawer
        title="内层抽屉"
        :visible.sync="innerVisible"
        size="30%"
        :modal-append-to-body="false"
        @close="handleInnerClose">
        <p>这是嵌套的内层抽屉内容</p>
      </el-drawer>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      outerVisible: false,
      innerVisible: false
    };
  },
  methods: {
    handleInnerClose() {
      // 关键修复点：确保遮罩层状态同步
      this.$nextTick(() => {
        const masks = document.querySelectorAll('.el-drawer__wrapper');
        if (masks.length > 1) {
          // 移除多余的遮罩层
          Array.from(masks).slice(0, -1).forEach(mask => {
            mask.parentNode.removeChild(mask);
          });
        }
      });
    }
  }
};
</script>
    

5. 流程图：嵌套 Drawer 生命周期与遮罩层状态流转

graph TD
            A[点击按钮打开外层Drawer] --> B{外层visible=true}
            B --> C[渲染外层Drawer及遮罩层]
            C --> D[点击内部按钮打开内层Drawer]
            D --> E{内层visible=true}
            E --> F[渲染内层Drawer及新遮罩层]
            F --> G[用户点击遮罩或关闭按钮]
            G --> H[触发内层close事件]
            H --> I[内层visible=false]
            I --> J[内层Drawer销毁但遮罩层残留?]
            J -- 是 --> K[执行handleInnerClose钩子]
            K --> L[通过DOM操作清理冗余遮罩]
            L --> M[恢复外层正常交互]
            J -- 否 --> M

6. 高级优化策略

对于拥有多个嵌套层级的复杂业务系统，建议引入Drawer 状态管理中心，实现全局统一管理。可通过 Vue 的 provide/inject 机制或 Vuex 进行状态共享。

核心设计思路包括：

• 维护一个栈结构存储当前激活的 Drawer 实例
• 每次打开新 Drawer 时 push 到栈顶，并设置唯一 zIndex
• 关闭时 pop 并重新计算最上层 Drawer 的遮罩状态
• 暴露 openDrawer / closeDrawer 全局方法供组件调用
• 结合 MutationObserver 监听 DOM 变化以预防异常残留