Vue useWakeLock 防止屏幕变黑或锁屏

Vue useWakeLock 防止屏幕变黑或锁屏，我们可以用在用户不操作网页但是需要屏幕一直高亮和不锁屏幕的场景中，比如大屏显示、播放视频或音乐。

代码示例

import { useWakeLock } from '@vueuse/core'

const { isSupported, isActive, request, release } = useWakeLock()
//请求防止锁屏和屏幕变暗,isActive等于true表示已激活
wakeLock.request('screen')
//释放请求
wakeLock.release()

在线例子

例子

类型定义

type WakeLockType = "screen"
export interface WakeLockSentinel extends EventTarget {
  type: WakeLockType
  released: boolean
  release: () => Promise<void>
}
export type UseWakeLockOptions = ConfigurableNavigator & ConfigurableDocument
/**
 * Reactive Screen Wake Lock API.
 *
 * @see https://vueuse.org/useWakeLock
 * @param options
 */
export declare function useWakeLock(options?: UseWakeLockOptions): {
  isSupported: ComputedRef<boolean>
  isActive: Ref<boolean>
  request: (type: WakeLockType) => Promise<void>
  release: () => Promise<void>
}
export type UseWakeLockReturn = ReturnType<typeof useWakeLock>