Skip to content

useDeviceMotion

Category
Export Size
703 B
Last Changed
last year

响应式 DeviceMotionEvent。提供有关设备位置和方向变化速度的信息给 Web 开发者。

Demo

设备运动:
{
  "acceleration": {},
  "accelerationIncludingGravity": {},
  "rotationRate": {},
  "interval": 16
}

用法

js
import { useDeviceMotion } from '@vueuse/core'

const {
  acceleration,
  accelerationIncludingGravity,
  rotationRate,
  interval,
} = useDeviceMotion()
状态类型描述
accelerationobject一个对象,提供设备在三个轴 X、Y 和 Z 上的加速度。
accelerationIncludingGravityobject一个对象,提供设备在三个轴 X、Y 和 Z 上受到重力影响后的加速度。
rotationRateobject一个对象,提供设备在三个方向轴 alpha、beta 和 gamma 上方向变化的速率。
intervalNumber一个表示以毫秒为单位从设备获取数据的时间间隔的数字。

您可以在 MDN 上找到有关状态的更多信息

组件用法

vue
<template>
  <UseDeviceMotion v-slot="{ acceleration }">
    加速度:{{ acceleration }}
  </UseDeviceMotion>
</template>

类型声明

typescript
export interface DeviceMotionOptions
  extends ConfigurableWindow,
    ConfigurableEventFilter {}
/**
 * 响应式 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>

Source

SourceDemoDocs

贡献者

Anthony Fu
Antério Vieira
丶远方
vaakian X
Shinigami
wheat
Alex Kozack

变更日志

v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow.
Get Early Access