useFullscreen

类别

导出大小

1.1 kB

最后更改

3 周前

响应式 Fullscreen API。它添加了在全屏模式下呈现特定元素（及其后代）以及在不再需要时退出全屏模式的方法。这使得可以使用用户的整个屏幕来呈现所需的内容（例如在线游戏），从而从屏幕上删除所有浏览器用户界面元素和其他应用程序，直到关闭全屏模式。

演示

源代码

用法

import { useFullscreen } from '@vueuse/core'
import { useTemplateRef } from 'vue'

const { isFullscreen, enter, exit, toggle } = useFullscreen()

全屏指定元素。某些平台（如 iOS 的 Safari）仅允许在视频元素上全屏。

TypeScript

const el = useTemplateRef<HTMLElement>('el')

const { isFullscreen, enter, exit, toggle } = useFullscreen(el)

const el = useTemplateRef('el')
const { isFullscreen, enter, exit, toggle } = useFullscreen(el)

html

<video ref="el"></video>

组件用法

此函数还通过 @vueuse/components 包提供无渲染组件版本。了解更多关于用法的信息。

vue

<template>
  <UseFullscreen v-slot="{ toggle }">
    <video />
    <button @click="toggle">
      Go Fullscreen
    </button>
  </UseFullscreen>
</template>

类型声明

typescript

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>