推荐首选 VueUse 的 useFullscreen 组合函数，它提供 isFullscreen 响应式状态及 enter/exit/toggle 方法，自动处理兼容性、事件监听与清理，支持全局或指定元素全屏控制。

用 Vue Composition API 封装全屏功能，核心是把原生 Fullscreen API 的状态、操作和事件响应统一收口，做成可复用、响应式、免手动兼容的组合函数。不需要重复写 requestFullscreen、监听 fullscreenchange、处理前缀或判断退出逻辑——这些都该由封装层承担。

直接使用 useFullscreen（推荐首选）

VueUse 的 useFullscreen 是目前最成熟、开箱即用的方案，已覆盖所有主流浏览器兼容性问题，并天然适配 Composition API：

• 导入后解构出 isFullscreen（响应式布尔值）、enter()、exit()、toggle() 四个能力；
• 不传参时默认控制整个页面（document.documentElement）；
• 传入 ref 元素（如 useTemplateRef('videoEl')）即可精准控制某一块区域；
• 所有方法返回 Promise，方便链式调用，比如 await toggle(); playVideo();；
• 自动监听 fullscreenchange 和 fullscreenerror，状态实时同步，无需额外 watch。

手动封装简易版（理解原理用）

若因项目限制不能引入 VueUse，可自行封装轻量级版本。关键点在于：状态响应化 + 前缀归一 + 事件绑定清理：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 用 ref(false) 存储当前全屏状态，初始值根据 document.fullscreenElement 判断；
• 封装 request 方法：依次尝试 el.requestFullscreen()、el.webkitRequestFullscreen() 等，捕获错误并提示；
• 在 onMounted 中添加 fullscreenchange 监听器，更新 ref 值；
• 在 onUnmounted 中移除监听，避免内存泄漏；
• 暴露 toggle 函数：先检查 document.fullscreenElement，再决定调用 enter 或 exit。

绑定目标元素与 CSS 配合

全屏效果不仅靠 JS 控制，还需样式协同：

• 目标元素（如
  ）建议设 width: 100%; height: 100%;，避免全屏后留白；
• 进入全屏时，浏览器会为该元素添加 :fullscreen 伪类，可用于定制全屏下样式（例如隐藏控件、调整字体大小）；
• 若需铺满视口且去除滚动条，可加 overflow: hidden 到根容器或目标元素；
• 注意移动端 Safari 对 iframe 内页面禁用全屏，需确保运行环境支持。

处理用户主动退出与边界情况

用户按 Esc、点击地址栏或切换 Tab 都可能导致全屏意外退出，封装时要兼顾健壮性：

• 监听 fullscreenerror 事件，捕获权限拒绝、跨域限制等异常，并给出友好提示；
• 某些浏览器（如旧版 Edge）退出后 document.fullscreenElement 可能延迟更新，建议在 fullscreenchange 回调中做防抖或 nextTick 刷新；
• 如果组件卸载时仍处于全屏状态，应在 onBeforeUnmount 中主动调用 exit()，防止残留全屏影响后续页面；
• 避免在非用户手势（如 setTimeout、API 回调）中触发全屏，否则多数浏览器会静默失败。