响应式 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 元素的全屏