useDeviceOrientation

類別

感測器

導出大小

731 B

上次變更

3 週前

響應式 DeviceOrientationEvent。為網頁開發者提供來自執行網頁之裝置物理方向的資訊。

示範

原始碼

isSupported: false
isAbsolute: false
alpha: null
beta: null
gamma: null

用法

import { useDeviceOrientation } from '@vueuse/core'

const {
  isAbsolute,
  alpha,
  beta,
  gamma,
} = useDeviceOrientation()

狀態	類型	描述
isAbsolute	`布林值`	一個布林值，表示裝置是否絕對地提供方向數據。
alpha	`數字`	一個數字，表示裝置繞 z 軸的運動，以度為單位表示，值範圍從 0 到 360。
beta	`數字`	一個數字，表示裝置繞 x 軸的運動，以度為單位表示，值範圍從 -180 到 180。
gamma	`數字`	一個數字，表示裝置繞 y 軸的運動，以度為單位表示，值範圍從 -90 到 90。

您可以在 MDN 上找到關於狀態的更多資訊。

元件用法

此函式也透過 @vueuse/components 套件提供無渲染元件版本。了解更多關於用法的資訊。

vue

<template>
  <UseDeviceOrientation v-slot="{ alpha, beta, gamma }">
    Alpha: {{ alpha }}
    Beta: {{ beta }}
    Gamma: {{ gamma }}
  </UseDeviceOrientation>
</template>

類型宣告

typescript

/**
 * Reactive DeviceOrientationEvent.
 *
 * @see https://vueuse.dev.org.tw/useDeviceOrientation
 * @param options
 */
export declare function useDeviceOrientation(options?: ConfigurableWindow): {
  isSupported: ComputedRef<boolean>
  isAbsolute: ShallowRef<boolean, boolean>
  alpha: Ref<number | null, number | null>
  beta: Ref<number | null, number | null>
  gamma: Ref<number | null, number | null>
}
export type UseDeviceOrientationReturn = ReturnType<typeof useDeviceOrientation>