全屏播放时播放器被裁剪或层级错乱，根本原因是其仍位于局部DOM中；应使用Teleport将其动态挂载到body或指定容器，通过ref响应式切换to目标，并配合fullscreenchange事件监听与预设挂载点实现无状态丢失的平滑切换。
全屏播放时播放器内容被父容器裁剪或层级错乱，根本原因是它仍被包裹在局部 DOM 结构里。用 Teleport 把播放器“移出”当前组件树，直接挂载到 <body> 或根节点，就能彻底避开样式限制和 z-index 冲突。
监听全屏状态，动态切换 Teleport 目标
不能写死 to="body" —— 全屏时要挂到 body，退出全屏得切回原位置，否则 DOM 会残留或错位。关键是让 to 值响应式变化：
- 用
ref定义一个目标容器引用，比如teleportTarget = ref(document.body) - 监听
fullscreenchange事件（全局），根据document.fullscreenElement判断是否处于全屏 - 全屏时设为
document.body，非全屏时设为页面中预设的容器节点（如document.getElementById('player-container')）
确保播放器 DOM 状态不丢失
Teleport 移动的是真实 DOM 节点，不是销毁重建。视频播放、音量、进度等状态都会保留，但要注意：
- 不要在
teleport外层套v-if，否则会触发组件卸载，导致播放中断 - 如果用了
Transition动画，需配合appear和persisted属性，避免全屏切换时闪烁 - 全屏后若需操作播放器尺寸，应通过 CSS 类控制（如
.player--fullscreen），而不是 JS 强制设置宽高
HTML 中提前准备挂载点
Vue 应用挂载前，就在 index.html 的 <body> 底部加一个空容器，作为全屏时的稳定锚点：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
<div id="fullscreen-portal"></div>这样在 JS 里可以直接用 document.getElementById('fullscreen-portal')，避免因 DOM 尚未就绪导致挂载失败。
封装成可复用的组合式函数
把全屏监听 + Teleport 目标切换逻辑抽成 useFullscreenPortal()，返回 teleportTarget 和 enterFullscreen() 方法，多个播放器组件都能直接调用，不用重复写监听逻辑。
