useDeviceOrientation

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

¥Reactive DeviceOrientationEvent. Provide web developers with information from the physical orientation of the device running the web page.

示例

源代码

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

用法

¥Usage

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 上的状态的更多信息。

¥You can find more information about the state on the MDN.

组件用法

¥Component Usage

<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: 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>

源代码

源代码 • 示例 • 文档

变更日志

v12.4.0 on 1/10/2025

dd316 - feat: use passive event handlers everywhere is possible (#4477)