vue 的 teleport 组件在“漫游式引导”中核心作用是将遮罩层和高亮框提至 body 顶层，确保遮罩全屏覆盖、高亮精准套住目标元素且逻辑归属不变；遮罩用 position: fixed 全屏定位，高亮框通过 getboundingclientrect 动态计算位置，二者均置于同一 teleport 内并保持响应式与事件绑定。
遮罩层必须挂载到 body 顶层
引导遮罩是半透明全屏层，需覆盖整个视口。如果留在组件内部，会被父容器的 overflow: hidden、transform 或 z-index 截断或偏移。正确做法是用 Teleport 直接投送到 body：
-
<teleport to="body"></teleport>是最常用且稳妥的目标，确保遮罩脱离所有组件层级 - 遮罩本身设为
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，配合足够高的z-index（如9999） - 避免使用
position: absolute配合transform父容器 —— 这会导致 fixed 定位失效或偏移
高亮元素需动态定位，不靠 Teleport 渲染
Teleport 不负责“高亮哪个元素”，它只解决“渲染位置”。真正实现高亮，是通过 JavaScript 获取目标元素的 getBoundingClientRect()，再将一个绝对定位的高亮框（如圆角矩形蒙版）叠加在遮罩层上：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 高亮框本身也应放在同一个
<teleport to="body"></teleport>内，与遮罩同级，保证层级一致 - 监听目标元素的位置变化（如滚动、resize），实时更新高亮框的
top、left、width、height - 可借助
ref获取目标 DOM 元素，例如：<div ref="targetRef">设置按钮</div>
保持状态与事件响应不丢失
虽然 DOM 被“传送”走了，但 Vue 的响应式系统和组件关系依然有效：
- 遮罩和高亮框的
v-if控制、props（如当前步骤、目标 ref）、emit（如下一步、跳过）全部照常工作 - 点击遮罩关闭引导？绑定在 Teleport 内部的
@click仍能触发父组件方法 - 不需要手动操作 DOM 或脱离 Vue 生命周期 —— 所有逻辑仍在组件实例内运行
常见避坑点
实际开发中最容易出问题的几个细节：
-
不要嵌套多个 Teleport 到同一目标：比如两个引导同时启用，都投到
body，需用v-if控制显隐，避免 DOM 冲突 -
避免在 Teleport 内使用
scoped样式影响定位：高亮框的尺寸/定位类建议写在全局样式或:deep()中 -
移动端注意
viewport缩放：getBoundingClientRect返回的是 CSS 像素，必要时结合window.visualViewport?.scale校正
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
