fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
3.4 KiB
3.4 KiB
category
| category |
|---|
| Sensors |
useDeviceMotion
Reactive DeviceMotionEvent. Provide web developers with information about the speed of changes for the device's position and orientation.
Usage
import { useDeviceMotion } from '@vueuse/core';
const { acceleration, accelerationIncludingGravity, rotationRate, interval } = useDeviceMotion();
Note: For iOS, you need to use
triggerand bind it with user interaction. After permission granted, the API will run automatically
| 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 |
You can find more information about the state on the MDN.
Component Usage
<template>
<UseDeviceMotion v-slot="{ acceleration }"> Acceleration: {{ acceleration }} </UseDeviceMotion>
</template>
Type Declarations
export interface DeviceMotionOptions extends ConfigurableWindow, ConfigurableEventFilter {
/**
* Request for permissions immediately if it's not granted,
* otherwise label and deviceIds could be empty
*
* @default false
*/
requestPermissions?: boolean;
}
/**
* Reactive DeviceMotionEvent.
*
* @see https://vueuse.org/useDeviceMotion
* @param options
*/
export declare function useDeviceMotion(options?: DeviceMotionOptions): {
acceleration: Ref<DeviceMotionEventAcceleration | null, DeviceMotionEventAcceleration | null>;
accelerationIncludingGravity: Ref<
DeviceMotionEventAcceleration | null,
DeviceMotionEventAcceleration | null
>;
rotationRate: Ref<DeviceMotionEventRotationRate | null, DeviceMotionEventRotationRate | null>;
interval: ShallowRef<number, number>;
isSupported: ComputedRef<boolean>;
requirePermissions: ComputedRef<boolean>;
ensurePermissions: () => Promise<void>;
permissionGranted: ShallowRef<boolean, boolean>;
};
export type UseDeviceMotionReturn = ReturnType<typeof useDeviceMotion>;