Vue Teleport 如何在全屏播放状态下将播放器传送到根节点

时间：2026-08-19 12:49:47 编辑：袖梨来源：一聚教程网

全屏播放时播放器被裁剪或层级错乱，根本原因是其仍位于局部DOM中；应使用Teleport将其动态挂载到body或指定容器，通过ref响应式切换to目标，并配合fullscreenchange事件监听与预设挂载点实现无状态丢失的平滑切换。

全屏播放时播放器内容被父容器裁剪或层级错乱，根本原因是它仍被包裹在局部 DOM 结构里。用 Teleport 把播放器“移出”当前组件树，直接挂载到 <body> 或根节点，就能彻底避开样式限制和 z-index 冲突。

不能写死 to="body" —— 全屏时要挂到 body，退出全屏得切回原位置，否则 DOM 会残留或错位。关键是让 to 值响应式变化：

用 ref 定义一个目标容器引用，比如 teleportTarget = ref(document.body)
监听 fullscreenchange 事件（全局），根据 document.fullscreenElement 判断是否处于全屏
全屏时设为 document.body，非全屏时设为页面中预设的容器节点（如 document.getElementById('player-container')）

Teleport 移动的是真实 DOM 节点，不是销毁重建。视频播放、音量、进度等状态都会保留，但要注意：

Vue 应用挂载前，就在 index.html 的 <body> 底部加一个空容器，作为全屏时的稳定锚点：

这样在 JS 里可以直接用 document.getElementById('fullscreen-portal')，避免因 DOM 尚未就绪导致挂载失败。

把全屏监听 + Teleport 目标切换逻辑抽成 useFullscreenPortal()，返回 teleportTarget 和 enterFullscreen() 方法，多个播放器组件都能直接调用，不用重复写监听逻辑。