useScreenOrientation

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

Reactive Screen Orientation API. It provides web developers with information about the user's current screen orientation.

例子

源

为了获得最佳效果，请使用移动或平板设备(或使用浏览器的检查器来模拟方向变化)

isSupported: false

Orientation Type:

Orientation Angle: 0

Usage

import { useScreenOrientation } from '@vueuse/core'

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

import { useScreenOrientation } from '@vueuse/core'

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

如果要锁定方向，您可以将 OrientationLockType 传递给 lockOrientation 函数。

To lock the orientation, you can pass an OrientationLockType to the lockOrientation function:

import { useScreenOrientation } from '@vueuse/core'

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

lockOrientation('portrait-primary')

import { useScreenOrientation } from '@vueuse/core'

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

lockOrientation('portrait-primary')

然后再次解锁，使用以下命令：

and then unlock again, with the following:

unlockOrientation()

unlockOrientation()

接受的方向类型是以下类型之一，"landscape-primary", "landscape-secondary", "portrait-primary", "portrait-secondary", "any", "landscape", "natural" 和 "portrait".

Accepted orientation types are one of "landscape-primary", "landscape-secondary", "portrait-primary", "portrait-secondary", "any", "landscape", "natural" and "portrait".

Screen Orientation API MDN

Type Declarations

typescript

/**
 * Reactive screen orientation
 *
 * @see https://vueuse.org/useScreenOrientation
 */
export declare const useScreenOrientation: (options?: ConfigurableWindow) => {
  isSupported: Ref<boolean>
  orientation: Ref<OrientationType | undefined>
  angle: Ref<number>
  lockOrientation: (type: OrientationLockType) => Promise<void>
  unlockOrientation: () => void
}
export type UseScreenOrientationReturn = ReturnType<typeof useScreenOrientation>

/**
 * Reactive screen orientation
 *
 * @see https://vueuse.org/useScreenOrientation
 */
export declare const useScreenOrientation: (options?: ConfigurableWindow) => {
  isSupported: Ref<boolean>
  orientation: Ref<OrientationType | undefined>
  angle: Ref<number>
  lockOrientation: (type: OrientationLockType) => Promise<void>
  unlockOrientation: () => void
}
export type UseScreenOrientationReturn = ReturnType<typeof useScreenOrientation>

Source

贡献者(Contributors)

日志(Changelog)

No recent changes

useScreenOrientation #

例子 #

Usage #

Type Declarations #

Source #

贡献者(Contributors) #

日志(Changelog) #