useDeviceOrientation

分类

传感器

导出大小

807 B

上次更改

3 个月前

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

演示

源代码演练场（Beta）

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

用法

import { useDeviceOrientation
 } from '@vueuse/core'

const {
  isAbsolute
,
  alpha
,
  beta
,
  gamma
,
} = useDeviceOrientation
()

状态	类型	描述
isAbsolute	`boolean`	一个布尔值，指示设备是否绝对提供方向数据。
alpha	`number`	一个数字，表示设备绕 z 轴的运动，以度表示，值范围为 0 到 360。
beta	`number`	一个数字，表示设备绕 x 轴的运动，以度表示，值范围为 -180 到 180。
gamma	`number`	一个数字，表示设备绕 y 轴的运动，以度表示，值范围为 -90 到 90。

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

组件用法

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

vue

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

类型声明

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