category |
---|
Sensors |
Reactive mouse position
import { useMouse } from '@vueuse/core'
const { x, y, sourceType } = useMouse()
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.
const { x, y } = useMouse({ touch: false })
It's also possible to provide a custom extractor function to get the position from the event.
import { type UseMouseEventExtractor, useMouse, useParentElement } from '@vueuse/core'
const parentEl = useParentElement()
const extractor: UseMouseEventExtractor = event => (
event instanceof Touch
? null
: [event.offsetX, event.offsetY]
)
const { x, y, sourceType } = useMouse({ target: parentEl, type: extractor })
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.
const { x, y } = useMouse({ touch: false })
<UseMouse v-slot="{ x, y }">
x: {{ x }}
y: {{ y }}
</UseMouse>