VueUse中文文档useDeviceOrientation
响应式DeviceOrientationEvent。提供给网页开发者当设备在浏览页面时物理旋转的信息。
Reactive DeviceOrientationEvent. Provide web developers with information from the physical orientation of the device running the web page.
例子
isSupported: false
isAbsolute: false
alpha: null
beta: null
gamma: null
Usage
js
import { useDeviceOrientation } from '@vueuse/core'
const {
isAbsolute,
alpha,
beta,
gamma,
} = useDeviceOrientation()
import { useDeviceOrientation } from '@vueuse/core'
const {
isAbsolute,
alpha,
beta,
gamma,
} = useDeviceOrientation()
| State | Type | Description |
|---|---|---|
| isAbsolute | boolean | 用来说明设备是提供的旋转数据是否是绝对定位的布尔值。 |
| alpha | number | 一个表示设备绕 z 轴旋转的角度（范围在 0-360 之间）的数字 |
| beta | number | 一个表示设备绕 x 轴旋转（范围在－180 到 180 之间）的数字，从前到后的方向为正方向。 |
| gamma | number | 一个表示设备绕 y 轴旋转（范围在－90 到 90 之间）的数字，从左向右为正方向。 |
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
<UseDeviceOrientation v-slot="{ alpha, beta, gamma }">
Alpha: {{ alpha }}
Beta: {{ beta }}
Gamma: {{ gamma }}
</UseDeviceOrientation>
<UseDeviceOrientation v-slot="{ alpha, beta, gamma }">
Alpha: {{ alpha }}
Beta: {{ beta }}
Gamma: {{ gamma }}
</UseDeviceOrientation>
Type Declarations
typescript
/**
* Reactive DeviceOrientationEvent.
*
* @see https://vueuse.org/useDeviceOrientation
* @param options
*/
export declare function useDeviceOrientation(options?: ConfigurableWindow): {
isSupported: Ref<boolean>
isAbsolute: Ref<boolean>
alpha: Ref<number | null>
beta: Ref<number | null>
gamma: Ref<number | null>
}
export type UseDeviceOrientationReturn = ReturnType<typeof useDeviceOrientation>
/**
* Reactive DeviceOrientationEvent.
*
* @see https://vueuse.org/useDeviceOrientation
* @param options
*/
export declare function useDeviceOrientation(options?: ConfigurableWindow): {
isSupported: Ref<boolean>
isAbsolute: Ref<boolean>
alpha: Ref<number | null>
beta: Ref<number | null>
gamma: Ref<number | null>
}
export type UseDeviceOrientationReturn = ReturnType<typeof useDeviceOrientation>