推荐首选 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 控制，还需样式协同：
立即学习“前端免费学习笔记（深入）”；
- 目标元素（如
<div ref="target">）建议设 <code>width: 100%; height: 100%;，避免全屏后留白； - 进入全屏时，浏览器会为该元素添加
:fullscreen伪类，可用于定制全屏下样式（例如隐藏控件、调整字体大小）； - 若需铺满视口且去除滚动条，可加
overflow: hidden到根容器或目标元素； - 注意移动端 Safari 对 iframe 内页面禁用全屏，需确保运行环境支持。
- 监听
fullscreenerror事件，捕获权限拒绝、跨域限制等异常，并给出友好提示； - 某些浏览器（如旧版 Edge）退出后
document.fullscreenElement可能延迟更新，建议在fullscreenchange回调中做防抖或 nextTick 刷新； - 如果组件卸载时仍处于全屏状态，应在 onBeforeUnmount 中主动调用
exit()，防止残留全屏影响后续页面； - 避免在非用户手势（如 setTimeout、API 回调）中触发全屏，否则多数浏览器会静默失败。
处理用户主动退出与边界情况
用户按 Esc、点击地址栏或切换 Tab 都可能导致全屏意外退出，封装时要兼顾健壮性：
