usePointer

类别

Sensors

导出大小

973 B

最近修改

2 days ago

响应式 指针状态。

🌐 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>