useFullscreen

分类

浏览器

导出大小

1.23 kB

上次更改

上个月

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

演示

源代码在线演练 (beta)

用法

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>

类型声明

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
>