跳到主要内容

useFullscreen

分类
导出大小
1.23 kB
上次更改
上个月

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

演示

用法

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

类型声明

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

来源

源文件演示文档

贡献者

Anthony Fu
Fernando Fernández
IlyaL
wheat
Antério Vieira
Arthur Darkstone
SerKo
Ben Lau
IlyaL
Anthony Fu
tawen
zaqvil
Yvan Zhu
vaakian X
Jelf
webfansplz
Shinigami
Alex Kozack

更新日志

8ac73 - 修复:指定请求、退出和启用...的返回类型 (#4965)
8c521 - feat(components)!: 重构组件并使其保持一致 (#4912)
v13.2.0
09cbd - 修复:在挂载时获取正确的初始状态 (#4745)
v12.4.0
dd316 - feat: 尽可能在所有地方使用被动事件处理程序 (#4477)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v10.2.1
14edb - 修复:不在全屏模式时跳过退出 (#3144)
v10.1.0
4a7a1 - 修复:多个全屏元素的 isFullscreen 处理 (#3000)

根据 MIT 许可证发布。