VueUseusePointer
Reactive pointer state.
Demo
{
"x": 0,
"y": 0,
"pointerId": 0,
"pressure": 0,
"tiltX": 0,
"tiltY": 0,
"width": 0,
"height": 0,
"twist": 0,
"pointerType": null,
"isInside": false
}Basic Usage
js
import { usePointer } from '@vueuse/core'
const { x, y, pressure, pointerType } = usePointer()
import { usePointer } from '@vueuse/core'
const { x, y, pressure, pointerType } = usePointer()
Component Usage
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
By default, the component will track the pointer on window
html
<UsePointer v-slot="{ x, y }">
x: {{ x }}
y: {{ y }}
</UsePointer>
<UsePointer v-slot="{ x, y }">
x: {{ x }}
y: {{ y }}
</UsePointer>
To track local position in the element, set target="self":
html
<UsePointer target="self" v-slot="{ x, y }">
x: {{ x }}
y: {{ y }}
</UsePointer>
<UsePointer target="self" v-slot="{ x, y }">
x: {{ x }}
y: {{ y }}
</UsePointer>
Type Declarations
Show Type Declarations
typescript
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/usePointer
* @param options
*/
export declare function usePointer(options?: UsePointerOptions): {
isInside: Ref<boolean>
pressure: Ref<number>
pointerId: Ref<number>
tiltX: Ref<number>
tiltY: Ref<number>
width: Ref<number>
height: Ref<number>
twist: Ref<number>
pointerType: Ref<PointerType | null>
x: Ref<number>
y: Ref<number>
}
export declare type UsePointerReturn = ReturnType<typeof usePointer>
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/usePointer
* @param options
*/
export declare function usePointer(options?: UsePointerOptions): {
isInside: Ref<boolean>
pressure: Ref<number>
pointerId: Ref<number>
tiltX: Ref<number>
tiltY: Ref<number>
width: Ref<number>
height: Ref<number>
twist: Ref<number>
pointerType: Ref<PointerType | null>
x: Ref<number>
y: Ref<number>
}
export declare type UsePointerReturn = ReturnType<typeof usePointer>
Source
Contributors
Anthony Fu
Jelf
zz