useFullscreen

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

¥Reactive Fullscreen API. It adds methods to present a specific Element (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until full-screen mode is shut off.

示例

source

用法

¥Usage

import { useFullscreen } from '@vueuse/core'

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

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

¥Fullscreen specified element. Some platforms (like iOS's Safari) only allow fullscreen on video elements.

TypeScript

const el = ref<HTMLElement | null>(null)

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

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

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

组件用法

¥Component Usage

<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/useFullscreen
 * @param target
 * @param options
 */
export declare function useFullscreen(
  target?: MaybeElementRef,
  options?: UseFullscreenOptions,
): {
  isSupported: ComputedRef<boolean>
  isFullscreen: Ref<boolean>
  enter: () => Promise<void>
  exit: () => Promise<void>
  toggle: () => Promise<void>
}
export type UseFullscreenReturn = ReturnType<typeof useFullscreen>

源代码

源代码 • 示例 • 文档

变更日志

No recent changes