useDeviceMotion

类别

Sensors

导出大小

1.14 kB

最近修改

2 days ago

响应式 DeviceMotionEvent。为网页开发者提供关于设备位置和方向变化速度的信息。

🌐 Reactive DeviceMotionEvent. Provide web developers with information about the speed of changes for the device's position and orientation.

示例

源代码在线运行

Device Motion:

Not supported by your current browser.

用法

🌐 Usage

import { useDeviceMotion } from '@vueuse/core'

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

注意：对于 iOS，你需要使用 trigger 并将其与用户交互绑定。 授权后，API 将自动运行

State	Type	Description
acceleration	object	An object giving the acceleration of the device on the three axis X, Y and Z.
accelerationIncludingGravity	object	An object giving the acceleration of the device on the three axis X, Y and Z with the effect of gravity.
rotationRate	object	An object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma.
interval	Number	A number representing the interval of time, in milliseconds, at which data is obtained from the device..
ensurePermissions	boolean	Indicates whether the platform requires permission to use the API
permissionGranted	boolean	Indicates whether the user has granted permission. The default is always false
trigger	Promise<void>	An async function to request user permission. The API runs automatically once permission is granted

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

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

组件用法

🌐 Component Usage

<template>
  <UseDeviceMotion v-slot="{ acceleration }">
    Acceleration: {{ acceleration }}
  </UseDeviceMotion>
</template>