Skip to content

useScreenOrientation

类别
导出体积
848 B
上次更改
2 months ago

响应式屏幕方向 API。它为 Web 开发人员提供了关于用户当前屏幕方向的信息。

示例

为了获得最佳效果,请使用手机或平板设备(或使用浏览器的原生检查器来模拟屏幕方向变化)
是否支持: false
Orientation 类型:
Orientation 角度: 0

用法

ts
import { 
useScreenOrientation
} from '@vueuse/core'
const {
isSupported
,
orientation
,
angle
,
lockOrientation
,
unlockOrientation
,
} =
useScreenOrientation
()

要锁定方向,你可以将 OrientationLockType 传递给 lockOrientation 函数:

ts
import { 
useScreenOrientation
} from '@vueuse/core'
const {
isSupported
,
orientation
,
angle
,
lockOrientation
,
unlockOrientation
,
} =
useScreenOrientation
()
lockOrientation
('portrait-primary')

然后再次解锁,使用以下方式:

ts
unlockOrientation
()

可接受的方向类型包括 "landscape-primary""landscape-secondary""portrait-primary""portrait-secondary""any""landscape""natural""portrait"

Screen Orientation API MDN

类型声明

显示类型声明
ts
export type 
OrientationType
=
| "portrait-primary" | "portrait-secondary" | "landscape-primary" | "landscape-secondary" export type
OrientationLockType
=
| "any" | "natural" | "landscape" | "portrait" | "portrait-primary" | "portrait-secondary" | "landscape-primary" | "landscape-secondary" export interface ScreenOrientation extends EventTarget {
lock
: (
orientation
:
OrientationLockType
) =>
Promise
<void>
unlock
: () => void
readonly
type
:
OrientationType
readonly
angle
: number
addEventListener
: (
type
: "change",
listener
: (
this
: this,
ev
: Event) => any,
useCapture
?: boolean,
) => void } /** * 响应式屏幕方向 * * @see https://vueuse.org/useScreenOrientation * * @__NO_SIDE_EFFECTS__ */ export declare function
useScreenOrientation
(
options
?:
ConfigurableWindow
): {
isSupported
:
ComputedRef
<boolean>
orientation
:
Ref
<
OrientationType
| undefined,
OrientationType
| undefined>
angle
:
ShallowRef
<number, number>
lockOrientation
: (
type
:
OrientationLockType
) =>
Promise
<void>
unlockOrientation
: () => void
} export type
UseScreenOrientationReturn
=
ReturnType
<typeof
useScreenOrientation
>

源码

源码演示文档

贡献者

一纸忘忧
Anthony Fu
SerKo
Anthony Fu
Michael J. Roberts
Robin
IlyaL
Fernando Fernández
Satrong
JunaYa
Jelf
Nicolas Hedger

更新日志

d32f8 - refactor: add @__NO_SIDE_EFFECTS__ annotations to all pure functions (#4907)
dd316 - feat: use passive event handlers everywhere is possible (#4477)
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
a086e - fix: stricter types
be3cc - fix: Add fault tolerance to lock and unlock (#3575)