useScreenOrientation

分类

浏览器

导出大小

848 B

上次更改

3 个月前

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

演示

源代码在线演练 (beta)

为获得最佳效果，请使用移动或平板设备（或使用浏览器的原生检查器模拟方向更改）

isSupported: false

方向类型：

方向角度：0

用法

import { useScreenOrientation
 } from '@vueuse/core'

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

要锁定方向，您可以向 lockOrientation 函数传递一个 OrientationLockType

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"。

屏幕方向 API MDN

类型声明

显示类型声明

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.cn/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
>