useFullscreen
响应式的 全屏 API。它增加了以全屏模式显示特定元素(及其后代)的方法,以及在不再需要时退出全屏模式的方法。这使得可以使用用户的整个屏幕来显示所需内容(例如在线游戏),并从屏幕上移除所有浏览器用户界面元素和其他应用程序,直到全屏模式关闭。
演示
用法
ts
import { useFullscreen } from '@vueuse/core'
const { isFullscreen, enter, exit, toggle } = useFullscreen()
全屏指定元素。某些平台(如 iOS 的 Safari)只允许视频元素全屏。
vue
<script setup lang="ts">
import { useFullscreen } from '@vueuse/core'
import { useTemplateRef } from 'vue'
const el = useTemplateRef('el')
const { isFullscreen, enter, exit, toggle } = useFullscreen(el)
</script>
<template>
<video ref="el" />
</template>
组件用法
此函数还通过
@vueuse/components
包提供了一个无渲染组件版本。了解更多用法。
vue
<template>
<UseFullscreen v-slot="{ toggle }">
<video />
<button @click="toggle">
Go Fullscreen
</button>
</UseFullscreen>
</template>
类型声明
ts
export interface UseFullscreenOptions extends ConfigurableDocument {
/**
* Automatically exit fullscreen when component is unmounted
*
* @default false
*/
autoExit?: boolean
}
/**
* Reactive Fullscreen API.
*
* @see https://vueuse.org.cn/useFullscreen
* @param target
* @param options
*/
export declare function useFullscreen(
target?: MaybeElementRef,
options?: UseFullscreenOptions,
): {
isSupported: ComputedRef<boolean>
isFullscreen: ShallowRef<boolean, boolean>
enter: () => Promise<void>
exit: () => Promise<void>
toggle: () => Promise<void>
}
export type UseFullscreenReturn = ReturnType<typeof useFullscreen>