useMouse
反应式鼠标位置
¥Reactive mouse position
示例
基本用法
¥Basic Usage
ts
import { useMouse } from '@vueuse/core'
const { x, y, sourceType } = useMouse()
默认情况下启用触摸。要仅检测鼠标更改,请将 touch
设置为 false
。dragover
事件用于在拖动时跟踪鼠标位置。
¥Touch is enabled by default. To only detect mouse changes, set touch
to false
. The dragover
event is used to track mouse position while dragging.
ts
const { x, y } = useMouse({ touch: false })
定制提取器
¥Custom Extractor
还可以提供自定义提取器函数来从事件中获取位置。
¥It's also possible to provide a custom extractor function to get the position from the event.
ts
import type { UseMouseEventExtractor } from '@vueuse/core'
import { useMouse, useParentElement } from '@vueuse/core'
const parentEl = useParentElement()
const extractor: UseMouseEventExtractor = event => (
event instanceof MouseEvent
? [event.offsetX, event.offsetY]
: null
)
const { x, y, sourceType } = useMouse({ target: parentEl, type: extractor })
js
import { useMouse, useParentElement } from '@vueuse/core'
const parentEl = useParentElement()
const extractor = (event) =>
event instanceof MouseEvent ? [event.offsetX, event.offsetY] : null
const { x, y, sourceType } = useMouse({ target: parentEl, type: extractor })
组件用法
¥Component Usage
vue
<template>
<UseMouse v-slot="{ x, y }">
x: {{ x }}
y: {{ y }}
</UseMouse>
</template>