VueUse中文文档useDeviceMotion
响应式 DeviceMotionEvent，为 web 开发者提供了关于设备的位置和方向的改变速度的信息。
Reactive DeviceMotionEvent. Provide web developers with information about the speed of changes for the device's position and orientation.
例子
Device Motion:
{
"acceleration": {
"x": null,
"y": null,
"z": null
},
"accelerationIncludingGravity": {
"x": null,
"y": null,
"z": null
},
"rotationRate": {
"alpha": null,
"beta": null,
"gamma": null
},
"interval": 0
}Usage
js
import { useDeviceMotion } from '@vueuse/core'
const {
acceleration,
accelerationIncludingGravity,
rotationRate,
interval,
} = useDeviceMotion()
import { useDeviceMotion } from '@vueuse/core'
const {
acceleration,
accelerationIncludingGravity,
rotationRate,
interval,
} = useDeviceMotion()
| State | Type | Description |
|---|---|---|
| acceleration | object | 提供了设备在 X,Y,Z 轴方向上加速度的对象。 |
| accelerationIncludingGravity | object | 提供了设备在 X,Y,Z 轴方向上带重力的加速度的对象。 |
| rotationRate | object | 提供了设备在 alpha、beta、gamma 轴方向上旋转的速率的对象。 |
| interval | Number | 表示从设备获取数据的间隔时间，单位是毫秒。 |
You can find more information about the state on the MDN.
Component Usage
该函数还通过
@vueuse/components提供了一个无渲染的组件版本。了解更多.
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<UseDeviceMotion v-slot="{ acceleration }">
Acceleration: {{ acceleration }}
</UseDeviceMotion>
<UseDeviceMotion v-slot="{ acceleration }">
Acceleration: {{ acceleration }}
</UseDeviceMotion>
Type Declarations
typescript
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>
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>