vue中实现全屏播放样式动态调整需监听fullscreenchange等兼容事件并维护isfullscreen响应式状态，再通过:class或:style绑定驱动视图更新，同时注意事件清理与跨浏览器适配。
Vue 中实现全屏播放状态变化时的样式动态调整，核心在于两件事：一是准确捕获全屏状态切换（进入/退出），二是将该状态映射为响应式数据，驱动样式实时更新。这不是单纯靠 watch 某个变量就能解决的问题，必须结合浏览器原生全屏 API 的事件监听与 Vue 的响应式机制协同工作。
监听全屏状态变更事件
浏览器不提供直接的“全屏状态”响应式属性，需手动监听 fullscreenchange 事件，并在 Vue 实例中维护一个布尔值来反映当前状态。
- 在
mounted钩子中添加全局监听：document.addEventListener('fullscreenchange', this.handleFullscreenChange) - 在
handleFullscreenChange方法里读取document.fullscreenElement（或兼容写法如document.webkitFullscreenElement）是否为null，据此设置isFullscreen数据属性 - 别忘了在
beforeUnmount中移除事件监听，避免内存泄漏
用响应式数据驱动样式绑定
将 isFullscreen 作为响应式字段，通过 :class 或 :style 绑定到目标元素上，实现样式自动切换。
- 推荐用动态 class 控制整体布局变化，例如：
:class="{ 'fullscreen-mode': isFullscreen, 'normal-mode': !isFullscreen }" - 若需精细控制尺寸、定位等，可用计算属性生成内联样式：
:style="playerStyle"，其中playerStyle根据isFullscreen返回不同宽高、object-fit或z-index - 注意：不要在事件回调里直接操作 DOM 样式，应始终通过响应式数据触发视图更新
处理跨浏览器兼容性细节
不同浏览器对全屏 API 和事件名称的实现不一致，需做适配封装，否则 fullscreenchange 可能不触发。
- 注册事件时补充兼容写法：
document.addEventListener('webkitfullscreenchange', ...)、document.addEventListener('msfullscreenchange', ...) - 判断全屏状态时统一使用封装函数，例如：
const isInFullscreen = () => !!document.fullscreenElement || !!document.webkitFullscreenElement || !!document.msFullscreenElement - 调用全屏方法也需兼容：
el.requestFullscreen?.() || el.webkitRequestFullscreen?.() || el.msRequestFullscreen?.()
结合视频组件增强体验
如果使用 vue-video-player 或类似封装库，可利用其内置的全屏钩子，避免重复监听。
- 监听组件的
@fullscreen-change事件（如有），它通常已做了兼容封装并返回布尔值 - 部分库会暴露
isFullscreen属性，可直接v-model:fullscreen双向绑定（需确认版本支持） - 仍建议保留自定义监听作为兜底，尤其当用户通过 Esc 键或浏览器工具栏退出全屏时，组件事件可能遗漏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
