跳到主要内容

useDeviceOrientation

分类
导出大小
807 B
上次更改
3 个月前

响应式的 DeviceOrientationEvent。为 Web 开发者提供有关运行网页设备的物理方向信息。

演示

isSupported: false
isAbsolute: false
alpha: null
beta: null
gamma: null

用法

ts
import { 
useDeviceOrientation
} from '@vueuse/core'
const {
isAbsolute
,
alpha
,
beta
,
gamma
,
} =
useDeviceOrientation
()
状态类型描述
isAbsoluteboolean一个布尔值,指示设备是否绝对提供方向数据。
alphanumber一个数字,表示设备绕 z 轴的运动,以度表示,值范围为 0 到 360。
betanumber一个数字,表示设备绕 x 轴的运动,以度表示,值范围为 -180 到 180。
gammanumber一个数字,表示设备绕 y 轴的运动,以度表示,值范围为 -90 到 90。

你可以在 MDN 上找到有关此状态的更多信息

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法

vue
<template>
  <UseDeviceOrientation v-slot="{ 
alpha
,
beta
,
gamma
}">
Alpha: {{
alpha
}}
Beta: {{
beta
}}
Gamma: {{
gamma
}}
</UseDeviceOrientation> </template>

类型声明

ts
/**
 * Reactive DeviceOrientationEvent.
 *
 * @see https://vueuse.org.cn/useDeviceOrientation
 * @param options
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function 
useDeviceOrientation
(
options
?:
ConfigurableWindow
): {
isSupported
:
ComputedRef
<boolean>
isAbsolute
:
ShallowRef
<boolean, boolean>
alpha
:
Ref
<number | null, number | null>
beta
:
Ref
<number | null, number | null>
gamma
:
Ref
<number | null, number | null>
} export type
UseDeviceOrientationReturn
=
ReturnType
<typeof
useDeviceOrientation
>

来源

源代码演示文档

贡献者

Anthony Fu
Antério Vieira
SerKo
Anthony Fu
IlyaL
Robin
Guspan Tanadi
Fernando Fernández
vaakian X
Jelf
Shinigami
wheat
Alex Kozack

更新日志

8c521 - feat(components)!: 重构组件并使其保持一致 (#4912)
v13.6.0
d32f8 - refactor: 为所有纯函数添加 @__NO_SIDE_EFFECTS__ 注释 (#4907)
v12.4.0
dd316 - feat: 尽可能在所有地方使用被动事件处理程序 (#4477)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)

根据 MIT 许可证发布。