useFullscreen

控制页面进入或退出全屏模式。

前置依赖

依赖参数

参数名	类型	说明
deps.vue.ref	<T>(value: T) => Ref<T>	Vue ref 函数
deps.vue.onMounted	(fn: () => void) => void	Vue onMounted 钩子
deps.vue.onUnmounted	(fn: () => void) => void	Vue onUnmounted 钩子
deps.document	DocumentFullscreen	Document 对象
deps.target	ElementFullscreen	要全屏的目标元素（可选）

环境要求

浏览器 API: Fullscreen API

所有主流浏览器都支持。

函数签名

function useFullscreen(
  deps: UseFullscreenDeps
): UseFullscreenReturn

interface UseFullscreenDeps {
  vue: VueCompositionAPI
  document: DocumentFullscreen
  target?: ElementFullscreen
}

interface UseFullscreenReturn {
  isSupported: Ref<boolean>
  isFullscreen: Ref<boolean>
  error: Ref<string | null>
  enter: () => Promise<void>
  exit: () => Promise<void>
  toggle: () => Promise<void>
}

参数

参数名	类型	必填	说明
deps	UseFullscreenDeps	是	依赖注入对象

返回值

属性	类型	说明
isSupported	Ref<boolean>	是否支持 Fullscreen API
isFullscreen	Ref<boolean>	是否处于全屏状态
error	Ref<string | null>	错误信息
enter	() => Promise<void>	进入全屏
exit	() => Promise<void>	退出全屏
toggle	() => Promise<void>	切换全屏状态

工作原理

1. 检查浏览器是否支持 Fullscreen API
2. 监听 fullscreenchange 事件，实时更新状态
3. 调用 enter() 使目标元素进入全屏
4. 调用 exit() 退出全屏
5. 用户按 ESC 键时自动退出全屏
6. 组件卸载时清理事件监听器

快捷键：

• F11：进入/退出全屏（浏览器级别）
• ESC：退出全屏

适用场景：

• 视频播放器
• 图片查看器
• 游戏界面
• 演示文稿
• 数据大屏

异常

无异常抛出