useDeviceOrientation

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

Demo

使用

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 包提供一个无渲染组件版本。了解更多用法。

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

类型声明

/**
 * Reactive DeviceOrientationEvent.
 *
 * @see https://vueuse.org/useDeviceOrientation
 * @param options
 */
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>

useDeviceMotion

useDevicePixelRatio