useDeviceOrientation

类别

Sensors

导出体积

807 B

上次更改

2 months ago

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

示例

源码 playground (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 上找到有关状态的更多信息。

组件用法

vue

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

类型声明

/**
 * 响应式 DeviceOrientationEvent.
 *
 * @see https://vueuse.org/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
>