响应式 ref 用于追踪全屏状态，配合 requestFullscreen() 和 exitFullscreen() 实现 UI 与行为的响应式控制；需监听 fullscreenchange 事件同步 document.fullscreenElement 状态，封装 enter/exit 函数并处理 Promise 拒绝及跨浏览器限制。
响应式 ref 本身不直接处理全屏逻辑，但可以完美配合原生 requestFullscreen() 和 exitFullscreen() API，用来响应式地追踪和控制全屏状态。核心在于：用 ref 存储当前是否处于全屏，并在 DOM 全屏状态变化时同步更新它；再通过该 ref 驱动 UI（如按钮文字、图标）和行为（如点击切换）。
用 ref 响应式追踪全屏状态
浏览器的全屏状态是全局的（document.fullscreenElement），且可能被用户按 ESC 或其他方式退出，所以不能只靠组件内变量。你需要监听 fullscreenchange 事件，并把状态同步到 ref 中：
- 定义
isFullscreen = ref(false) - 在
onMounted中添加事件监听器，检查document.fullscreenElement并更新 ref - 在
onUnmounted中移除监听器，避免内存泄漏
封装可复用的全屏控制函数
把进入/退出逻辑抽成函数，便于复用和测试：
-
enterFullscreen(el: HTMLElement)：调用el.requestFullscreen()，并处理拒绝情况（如返回 Promise 拒绝或抛错） -
exitFullscreen()：调用document.exitFullscreen() - 两个函数都应在执行后主动触发一次状态同步（因为事件可能未及时触发）
在模板中响应式驱动 UI 与交互
利用 isFullscreen.value 控制按钮文案、图标、禁用状态等：
- 按钮文字可设为
{{ isFullscreen ? '退出全屏' : '全屏显示' }} - 图标类名可绑定：
:class="{ 'icon-fullscreen-exit': isFullscreen, 'icon-fullscreen-enter': !isFullscreen }" - 点击事件调用对应函数：
@click="isFullscreen ? exitFullscreen() : enterFullscreen(targetEl)"
注意跨浏览器与安全限制
全屏 API 有明确约束，需提前规避常见失败：
- 只能由用户手势（如 click、touchend）触发，不能在异步回调或定时器中调用
- 部分浏览器要求 HTTPS 环境（本地
localhost通常豁免） -
requestFullscreen()返回 Promise，在 catch 中处理拒绝（如用户拒绝、元素不可全屏、嵌套 iframe 限制） - 移动端支持有限，iOS Safari 不支持非 video 元素的全屏
