usePointer

反应式 指针状态。

¥Reactive pointer state.

示例

源代码演练场

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

基本用法

¥Basic Usage

import { usePointer } from '@vueuse/core'

const { x, y, pressure, pointerType } = usePointer()

组件用法

¥Component Usage

默认情况下，组件将跟踪 window 上的指针

¥By default, the component will track the pointer on window

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

要跟踪元素中的本地位置，请设置 target="self"：

¥To track local position in the element, set target="self":

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