跳到主要内容

usePointer

分类
导出大小
1.03 kB
上次更改
2 个月前

响应式的指针状态

演示

{
  "x": 0,
  "y": 0,
  "pointerId": 0,
  "pressure": 0,
  "tiltX": 0,
  "tiltY": 0,
  "width": 0,
  "height": 0,
  "twist": 0,
  "pointerType": null,
  "isInside": false
}

基本用法

ts
import { 
usePointer
} from '@vueuse/core'
const {
x
,
y
,
pressure
,
pointerType
} =
usePointer
()

组件用法

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

默认情况下,组件将在 window 上跟踪指针。

vue
<template>
  <UsePointer v-slot="{ 
x
,
y
}">
x: {{
x
}}
y: {{
y
}}
</UsePointer> </template>

要在元素中跟踪本地位置,请设置 target="self"

vue
<template>
  <UsePointer v-slot="{ 
x
,
y
}"
target
="self">
x: {{
x
}} y: {{
y
}}
</UsePointer> </template>

类型声明

显示类型声明
ts
export interface UsePointerState extends Position {
  
pressure
: number
pointerId
: number
tiltX
: number
tiltY
: number
width
: number
height
: number
twist
: number
pointerType
:
PointerType
| null
} export interface UsePointerOptions extends ConfigurableWindow { /** * Pointer types that listen to. * * @default ['mouse', 'touch', 'pen'] */
pointerTypes
?:
PointerType
[]
/** * Initial values */
initialValue
?:
MaybeRef
<
Partial
<UsePointerState>>
/** * @default window */
target
?:
MaybeRef
<EventTarget | null | undefined> | Document | Window
} /** * Reactive pointer state. * * @see https://vueuse.org.cn/usePointer * @param options */ export declare function
usePointer
(
options
?: UsePointerOptions): {
isInside
:
ShallowRef
<boolean, boolean>
pressure
:
Ref
<number, number>
pointerId
:
Ref
<number, number>
tiltX
:
Ref
<number, number>
tiltY
:
Ref
<number, number>
width
:
Ref
<number, number>
height
:
Ref
<number, number>
twist
:
Ref
<number, number>
pointerType
:
Ref
<
PointerType
| null,
PointerType
| null>
x
:
Ref
<number, number>
y
:
Ref
<number, number>
} export type
UsePointerReturn
=
ReturnType
<typeof
usePointer
>

来源

源代码演示文档

贡献者

Anthony Fu
IlyaL
broBinChen
SerKo
IlyaL
Anthony Fu
cunzaizhuyi
丶远方
vaakian X
Jelf
zz

更新日志

8c521 - feat(components)!: 重构组件并使其保持一致 (#4912)
v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v10.3.0
ee425 - 修复:为 pressure 字段添加 pointerup 事件 (#3217)

根据 MIT 许可证发布。