Vue Teleport 如何在对话框组件中实现多弹窗层级叠加管理

Vue Teleport 本身不直接管理多弹窗层级，但它为层级叠加提供了必要前提：把弹窗 DOM 移出父级作用域，让 z-index 真正生效；真正的层级叠加管理需配合响应式状态、统一 zIndex 计数器和用户交互逻辑实现。

Vue Teleport 本身不直接管理多弹窗层级，但它为层级叠加提供了必要前提：把弹窗 DOM 移出父级作用域，让 z-index 真正生效。真正的层级叠加管理，需要配合响应式状态 + 统一 zIndex 计数器 + 用户交互逻辑来实现。

挂载到统一容器，切断父级样式干扰

所有对话框必须用 Teleport 渲染到同一目标节点（如 body 或专用容器 <div id="dialog-root"></div>），否则不同弹窗可能落在不同 DOM 上下文中，z-index 无法横向比较。

1. 避免写成 <Teleport to="body">... 和 <Teleport to="#app">... 混用——它们渲染在不同父节点下，z-index 互不感知
2. 推荐显式创建一个空容器：<div id="dialog-root" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;"></div>，所有弹窗都传送到这里
3. 这样所有弹窗的 DOM 兄弟关系明确，z-index 才能按数值大小真实排序

用响应式对象集中管理每个弹窗的 zIndex

不能靠静态 class 或固定值，必须为每个弹窗实例分配唯一可变的 z-index，并实时响应变化。

1. 定义一个全局或模块级响应式对象，例如：const dialogZIndices = reactive<Record<string, number>>({})
2. 每次打开新弹窗时，生成唯一 ID（如 Symbol() 或时间戳 + 随机数），并设其 zIndex 为当前最大值 + 1
3. 模板中绑定：<div class="dialog-wrapper" :style="{ zIndex: dialogZIndices[id] }">
4. 关闭弹窗时，从对象中删除对应 key，避免内存泄漏

点击置顶 + 新开置顶双触发逻辑

用户操作是层级变化的核心驱动力，需同时支持两种场景：

1. 点击任意弹窗空白处（非按钮）时，调用 bringToFront(id) 函数：遍历 dialogZIndices 找出最大值，将当前 id 的 zIndex 设为该值 + 1
2. 新开弹窗时，同样调用 bringToFront(newId)，确保它默认在最上层
3. 注意防抖：连续快速点击多个弹窗时，避免 zIndex 被反复重设导致错乱；可用 nextTick 或简单计时器控制更新节奏

遮罩层也要参与层级计算

遮罩（overlay）不是装饰，而是层级体系的一部分。它必须和对应弹窗保持严格层级关系：

1. 每个弹窗应配一个专属遮罩，二者共享同一个 zIndex 值（遮罩略低，如 zIndex - 1），避免遮罩盖住其他弹窗的标题栏
2. 不要全局只用一个遮罩——那样所有弹窗共用一层，无法实现“仅遮挡底层、不遮挡同级其他弹窗”的效果
3. 遮罩也必须用 Teleport 渲染到同一容器中，否则位置或层级会脱节