VueUse useDeviceMotion 获得设备方向及运动信息

VueUse useDeviceMotion 获得设备方向及运动信息，比如陀螺仪、罗盘及加速计等信息。

说明

State	类型	说明
acceleration	object	设备在三个轴X、Y和Z上的加速度
accelerationIncludingGravity	object	装置在重力作用下在三个轴X、Y和Z上的加速度
rotationRate	object	设备在三个定向轴α、β和γ上的定向的变化率
interval	Number	从设备获取数据的时间间隔（以毫秒为单位）

代码示例

import { useDeviceMotion } from '@vueuse/core'

const {
  acceleration,
  accelerationIncludingGravity,
  rotationRate,
  interval,
} = useDeviceMotion()

组件示例

<script setup lang="ts"> 
import { UseDeviceMotion } from '@vueuse/components'
 
</script>
<template>
  <UseDeviceMotion v-slot="{ acceleration }">
    Acceleration: {{ acceleration }}
  </UseDeviceMotion>
</template>

在线例子

例子

类型定义

export interface DeviceMotionOptions
  extends ConfigurableWindow,
    ConfigurableEventFilter {}
/**
 * Reactive DeviceMotionEvent.
 *
 * @see https://vueuse.org/useDeviceMotion
 * @param options
 */
export declare function useDeviceMotion(options?: DeviceMotionOptions): {
  acceleration: Ref<DeviceMotionEventAcceleration | null>
  accelerationIncludingGravity: Ref<DeviceMotionEventAcceleration | null>
  rotationRate: Ref<DeviceMotionEventRotationRate | null>
  interval: Ref<number>
}
export type UseDeviceMotionReturn = ReturnType<typeof useDeviceMotion>