useDeviceOrientation

カテゴリ

センサー

エクスポートサイズ

672 B

最終更新日

先週

リアクティブなDeviceOrientationEvent。ウェブ開発者に、ウェブページを実行しているデバイスの物理的な向きに関する情報を提供します。

デモ

ソースコード

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

使用方法

JavaScript

import { useDeviceOrientation } from '@vueuse/core'

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

状態	型	説明
isAbsolute	`boolean`	デバイスが絶対的な向きデータを提供しているかどうかを示すブール値。
alpha	`number`	z軸周りのデバイスの動きを表す数値。0～360の範囲の度数で表されます。
beta	`number`	x軸周りのデバイスの動きを表す数値。-180～180の範囲の度数で表されます。
gamma	`number`	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.dokyumento.jp/useDeviceOrientation
 * @param options
 */
export declare function useDeviceOrientation(options?: ConfigurableWindow): {
  isSupported: ComputedRef<boolean>
  isAbsolute: Ref<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>