必须传送到body，因为灯箱需全屏遮罩、自由缩放和高z-index，若留在组件内易被overflow:hidden截断、transform影响定位失准、z-index被压制；传送至body可获得独立画布，避免样式与层级干扰。

直接用 <Teleport to="body"> 包住整个灯箱结构，就能把大图和遮罩层渲染到 <body> 最外层，避开父级样式限制。

为什么必须传送到 body

图片预览灯箱常需要全屏遮罩、自由缩放和高 z-index。如果留在组件内部，容易被父容器的 overflow: hidden 截断，或受 transform、perspective 影响定位失准，z-index 也被层层包裹压制。传送到 body 下，等于获得“独立画布”，所有样式和交互不再受干扰。

怎么写 Teleport 结构

把灯箱的根容器（含遮罩、图片、操作按钮）整体包进 Teleport：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 不要只传图片标签，要传整个可交互的 UI 结构（遮罩层 + 图片容器 + 导航按钮 + 关闭按钮）
• to 属性写成字符串 "body" 即可，Vue 会自动挂载到 <body> 末尾
• 保持状态逻辑仍在原组件内：比如当前索引 currentIndex、图片数组 imgList、显隐控制 visible 都不用动

配套关键细节

光靠 Teleport 不够，还需配合几项处理：

立即学习“前端免费学习笔记（深入）”；

• 灯箱容器加 position: fixed 和足够高的 z-index（如 9999），确保压过所有内容
• 打开时锁定页面滚动：document.body.style.overflow = 'hidden'；关闭时恢复
• 支持 ESC 关闭和点击遮罩关闭，这些事件监听仍可写在原组件中，不因 Teleport 改变响应逻辑
• 若需过渡动画，把 <Transition> 套在 Teleport 外层，动画类名作用于灯箱根元素即可

常见错误提醒

容易踩的坑：

• Teleport 写在条件渲染（v-if）内部但未同步控制显隐——应让 v-if 控制 Teleport 整体，而非只控制内部内容
• 多个灯箱同时使用同一个 Teleport 目标（如都传到 body），可能造成 DOM 节点覆盖——实际无问题，Vue 会正确管理多个 Teleport 实例
• 忽略键盘焦点管理，影响无障碍访问——建议打开时将焦点移入灯箱，关闭时返回触发按钮