useScreenOrientation

类别

Browser

导出体积

848 B

上次更改

4 minutes ago

响应式屏幕方向 API。它为 Web 开发人员提供了关于用户当前屏幕方向的信息。

示例

源码 playground (beta)

为了获得最佳效果，请使用手机或平板设备（或使用浏览器的原生检查器来模拟屏幕方向变化）

是否支持： false

Orientation 类型：

Orientation 角度： 0

用法

import { useScreenOrientation } from '@vueuse/core'

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

要锁定方向，你可以将 OrientationLockType 传递给 lockOrientation 函数：

import { useScreenOrientation } from '@vueuse/core'

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

lockOrientation('portrait-primary')

然后再次解锁，使用以下方式：

unlockOrientation()

可接受的方向类型包括 "landscape-primary"、"landscape-secondary"、"portrait-primary"、"portrait-secondary"、"any"、"landscape"、"natural" 和 "portrait"。

Screen Orientation API MDN

类型声明

显示类型声明

typescript

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
}
/**
 * 响应式屏幕方向
 *
 * @see https://vueuse.org/useScreenOrientation
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useScreenOrientation(options?: ConfigurableWindow): {
  isSupported: ComputedRef<boolean>
  orientation: Ref<OrientationType | undefined, OrientationType | undefined>
  angle: ShallowRef<number, number>
  lockOrientation: (type: OrientationLockType) => Promise<void>
  unlockOrientation: () => void
}
export type UseScreenOrientationReturn = ReturnType<typeof useScreenOrientation>