useFullscreen

カテゴリ

エクスポートサイズ

1.05 KB

最終更新日

先週

リアクティブなフルスクリーンAPI です。特定の要素（とその子孫）をフルスクリーンモードで表示し、不要になったらフルスクリーンモードを終了するためのメソッドを追加します。これにより、オンラインゲームなどの目的のコンテンツをユーザーの画面全体を使用して表示し、フルスクリーンモードがオフになるまで、すべてのブラウザユーザーインターフェース要素と他のアプリケーションを画面から削除することができます。

デモ

ソース

使用方法

import { useFullscreen } from '@vueuse/core'

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

指定された要素をフルスクリーン表示します。一部のプラットフォーム（iOSのSafariなど）では、ビデオ要素のみフルスクリーン表示が可能です。

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)

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