Vue Teleport 怎么在引导操作步骤浮层中精准高亮目标DOM元素

Vue Teleport 本身不负责高亮目标元素，仅将引导浮层渲染到指定位置（如 body）以规避样式干扰；精准高亮依赖 DOM 查询、动态定位与遮罩层裁剪，Teleport 是其稳定运行的基础设施。

Vue Teleport 本身不负责“高亮目标元素”，它只负责把引导浮层的 DOM 渲染到指定位置（比如 body），从而避开父级样式干扰。真正实现“精准高亮”的关键，在于结合 DOM 查询 + 动态定位 + 遮罩层裁剪，而 Teleport 是让这套逻辑稳定运行的基础设施。

高亮原理：遮罩+镂空+绝对定位

漫游式引导（Tour）的高亮效果，本质是：在全屏遮罩层上“挖一个洞”，让洞下方的目标元素透出来，同时把引导气泡固定在目标元素附近。Teleport 确保遮罩和气泡能脱离当前组件层级，避免被 overflow: hidden、transform 或 z-index 截断。

1. 遮罩层用 position: fixed 覆盖整个视口，背景半透明
2. 目标区域通过 getBoundingClientRect() 获取坐标，动态生成一个镂空区域（如用 clip-path 或叠加反色蒙版）
3. 引导气泡用 position: absolute + 目标元素 offset 定位，确保紧贴其边缘
4. 所有这些 DOM 必须渲染在 body 下，否则可能被祖先容器裁剪 —— 这正是 Teleport 解决的问题

Teleport 的正确用法：绑定到 body，不写死 ID

不要把引导组件传送到某个自定义 ID 容器里（如 #tour-target），除非你明确控制该容器的样式和层级。对引导浮层来说，最稳妥的目标是 body：

<Teleport to="body"><div v-if="currentStep" class="tour-overlay"><!-- 遮罩 + 镂空区域 --><div class="tour-mask" :style="maskStyle"></div><!-- 引导气泡 --><div class="tour-bubble" :style="bubbleStyle"><slot name="content"></slot><button @click="nextStep">下一步</button></div></div></Teleport>

这样能保证遮罩层和气泡始终处于最高视觉层级，不受任何父组件影响。

精准定位目标元素的三步操作

在引导组件内部，需要主动获取目标 DOM 元素并计算位置。推荐做法：

1. 用 ref 或选择器定位目标：支持两种方式：ref="targetRef"（推荐，响应式强），或 document.querySelector(targetSelector)（适合跨组件目标）
2. 监听元素存在与尺寸变化：目标元素可能异步渲染（如懒加载按钮）、或随窗口 resize 变形。可用 onMounted + onUpdated + window.addEventListener('resize', ...) 组合更新位置
3. 计算气泡锚点偏移：调用 targetRef.value?.getBoundingClientRect()，再根据气泡宽高、方向（top/bottom/left/right）加减像素值。例如底部气泡可设：top: rect.bottom + 8, left: rect.left + rect.width / 2 - bubbleWidth / 2

避坑要点：遮罩镂空不能靠 margin/padding 模拟

常见错误是试图用多个 div 拼出“留白”效果（比如上下左右四个遮罩块）。这会导致定位不准、响应式断裂、圆角/阴影失效。正确做法是使用 clip-path 或 mask：

.tour-mask {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%,0 calc(var(--top) - 2px),calc(var(--left) - 2px) calc(var(--top) - 2px),calc(var(--left) - 2px) calc(var(--top) + var(--height) + 2px),calc(var(--left) + var(--width) + 2px) calc(var(--top) + var(--height) + 2px),calc(var(--left) + var(--width) + 2px) calc(var(--top) - 2px),100% calc(var(--top) - 2px),100% 0);}

配合 CSS 变量动态注入 --top、--left、--width、--height，就能实现像素级精准镂空。