useDeviceOrientation

Demo

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>

类型声明

typescript

/**
 * 响应式 DeviceOrientationEvent.
 *
 * @see https://vueuse.org/useDeviceOrientation
 * @param options
 */
export declare function useDeviceOrientation(options?: ConfigurableWindow): {
  isSupported: ComputedRef<boolean>
  isAbsolute: Ref<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>