VueUse useScreenOrientation 屏幕方向相关API

VueUse useScreenOrientation 屏幕方向相关API，获取用户当前屏幕方向的信息,lockOrientation不支持IOS。

代码示例

import { useScreenOrientation } from '@vueuse/core'

const {
  isSupported,
  orientation,
  angle,
  lockOrientation,
  unlockOrientation,
} = useScreenOrientation()

//锁定屏幕方向 IOS不支持
lockOrientation('portrait-primary')

相关定义

export type OrientationType =
  | "portrait-primary"
  | "portrait-secondary"
  | "landscape-primary"
  | "landscape-secondary"
export type OrientationLockType =
  | "any"
  | "natural"
  | "landscape"
  | "portrait"
  | "portrait-primary"
  | "portrait-secondary"
  | "landscape-primary"
  | "landscape-secondary"
export interface ScreenOrientation extends EventTarget {
  lock(orientation: OrientationLockType): Promise<void>
  unlock(): void
  readonly type: OrientationType
  readonly angle: number
  addEventListener(
    type: "change",
    listener: (this: this, ev: Event) => any,
    useCapture?: boolean,
  ): void
}
/**
 * Reactive screen orientation
 *
 * @see https://vueuse.org/useScreenOrientation
 */
export declare function useScreenOrientation(options?: ConfigurableWindow): {
  isSupported: ComputedRef<boolean>
  orientation: Ref<OrientationType | undefined>
  angle: Ref<number>
  lockOrientation: (type: OrientationLockType) => Promise<void>
  unlockOrientation: () => void
}
export type UseScreenOrientationReturn = ReturnType<typeof useScreenOrientation>