vueuse 中文文档

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

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

说明

State类型说明
accelerationobject设备在三个轴X、Y和Z上的加速度
accelerationIncludingGravityobject装置在重力作用下在三个轴X、Y和Z上的加速度
rotationRateobject设备在三个定向轴α、β和γ上的定向的变化率
intervalNumber从设备获取数据的时间间隔(以毫秒为单位)

代码示例

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>
Catalog
vueuse 入门 State 状态 Elements 元素 Browser 浏览器 Sensors 感应监测 onClickOutside 侦听元素外部点击 onKeyStroke 监听按键 onLongPress 长按事件 onStartTyping 非编辑元素输入时触发 useBattery 获取电池状态。 useDeviceMotion 设备方向及运动信息 useDeviceOrientation 方向变化信息 useDevicePixelRatio 屏幕像素比 useDevicesList 可用设备列表