VueUse useDeviceOrientation 获得设备方向变化信息

VueUse useDeviceOrientation 获得设备方向变化信息

说明

State	类型	说明
isAbsolute	boolean	A boolean that indicates whether or not the device is providing orientation data absolutely.
alpha	Number	设备沿z轴上的旋转角度，范围为0~360
beta	Number	设备在x轴上的旋转角度，范围为-180~180
gamma	Number	设备在y轴上的旋转角度，范围为-90~90

代码示例

import { useDeviceOrientation } from '@vueuse/core'

const {
  isAbsolute,
  alpha,
  beta,
  gamma,
} = useDeviceOrientation()
/*
iOS12.4以上版本，必须要使用https协议才能正常使用
然后通过以下方法申请权限
DeviceMotionEvent.requestPermission().then(function (state) {
    if ('granted' === state) {
      //申请权限成功
    } else {
        alert('apply permission state: ' + state);
    }
}).catch(function(err){
    alert('error: ' + err);
});
*/

组件示例

<script setup lang="ts"> 
import { UseDeviceOrientation } from '@vueuse/components'
 
</script>
<template>
  <UseDeviceOrientation v-slot="{ alpha, beta, gamma }">
    Alpha: {{ alpha }}
    Beta: {{ beta }}
    Gamma: {{ gamma }}
  </UseDeviceOrientation>
</template>

在线例子

例子

类型定义

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