useFullscreen

类别

Browser

导出大小

1.22 kB

最近修改

2 days ago

响应式 全屏 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.

示例

源代码在线运行

用法

🌐 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.

<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>

组件用法

🌐 Component Usage

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