使用 watcheffect 监听全屏状态需先用 ref 包装 document.fullscreenelement 并通过 fullscreenchange 事件手动同步，再在 watcheffect 中调用 classlist.toggle 动态切换根元素类名。
用 watchEffect 监听全屏状态并自动切换类名，核心是监听 document.fullscreenElement 的变化，并据此给根元素（如 或 <div id="app">）添加或移除类名。Vue 3 的 <code>watchEffect 会自动追踪响应式依赖，而 document.fullscreenElement 本身**不是响应式数据**，所以需要把它包装成一个响应式引用（ref）并手动触发更新。
1. 创建响应式的全屏状态 ref
由于浏览器全屏 API 是通过原生 DOM 属性控制的，需主动监听 fullscreenchange 事件来同步状态：
- 定义一个
isFullscreen = ref(false) - 在
onMounted中绑定document.addEventListener('fullscreenchange', ...) - 在回调里更新
isFullscreen.value = !!document.fullscreenElement - 别忘了在
onUnmounted中移除事件监听
2. 用 watchEffect 响应式地切换类名
在 setup 中调用 watchEffect，根据 isFullscreen 的值操作 DOM 类名：
- 推荐操作
document.body（全局生效）或应用根容器（如document.getElementById('app')） - 添加类名建议用
classList.toggle('fullscreen-active', isFullscreen.value)，简洁且可逆 - 避免直接赋值
className，防止覆盖其他类名
3. 完整示例代码（组合式 API）
（放在 setup() 内）
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章