usePointerLock

分类

传感器

导出大小

1.48 kB

上次更改

3 个月前

响应式的指针锁定。

演示

源代码在线演练 (beta)

基本用法

import { usePointerLock
 } from '@vueuse/core'

const {
  isSupported
,
  lock
,
  unlock
,
  element
,
  triggerElement

} = usePointerLock
()

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法。

vue

<template>
  <UsePointerLock v-slot="{ lock
 }">
    <canvas
 />
    <button
 @click
="lock
">
      Lock Pointer on Canvas
    </button
>
  </UsePointerLock>
</template>

类型声明

export interface UsePointerLockOptions extends ConfigurableDocument {}
/**
 * Reactive pointer lock.
 *
 * @see https://vueuse.org.cn/usePointerLock
 * @param target
 * @param options
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function usePointerLock
(
  target
?: MaybeElementRef
,
  options
?: UsePointerLockOptions,
): {
  isSupported
: ComputedRef
<boolean>
  element
: ShallowRef
<MaybeElement
, MaybeElement
>
  triggerElement
: ShallowRef
<MaybeElement
, MaybeElement
>
  lock
: (e
: MaybeElementRef
 | Event) => Promise
<HTMLElement | SVGElement>
  unlock
: () => Promise
<boolean>
}
export type UsePointerLockReturn
 = ReturnType
<typeof usePointerLock
>