Vue UseGesture is a hook that allows you to hook up a richer mouse and touch events to any component or display. With the data you receive, setting up gestures becomes trivial, often requiring no more than a few lines of code.
You can use it on its own, but to get the most out of it you should combine it with an animation library like vue-use-spring, although you could certainly use any other.
How to make use of it:
Install and download:
# Yarn $ yarn add vue-use-gesture # NPM $ npm i vue-use-gesture
1. Import UseGesture.
import { useDrag } from ‘vue-use-gesture’
import { useSpring } from ‘vue-use-spring’
import { defineComponent, computed } from ‘vue’2. Primary use.
<template> <div v-bind="bind()" :style="style" class="box"></div> </template>
export default defineComponent({
setup() {
const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))
const bind = useDrag(({ down, movement: [mx, my] }) => {
set({ x: down ? mx : 0, y: down ? my : 0 })
})
const style = computed(() => ({ transform: `translate3d(${x.value}px,${y.value}px,0)` }))
return { bind, style }
},
})Available hooks
vue-use-gesture exports several hooks that can handle different gestures:
| Hook | Description |
|---|---|
useDrag | Handles the drag gesture |
useMove | Handles mouse move events |
useHover | Handles mouse enter and mouse leave events |
useScroll | Handles scroll events |
useWheel | Handles wheel events |
usePinch | Handles the pinch gesture |
useGesture | Handles multiple gestures in one hook |
Generic options
Generic options deal with how 👍 Vue UseGesture will set event listeners.
| Option | Description |
|---|---|
domTarget | Lets you specify a dom node or Vue ref to which you want to attach the gesture too. |
eventOptions | Lets you customize if you want events to be passive or captured. |
window | Lets you specify which window element the gesture should bind events to (only relevant to the drag gesture). |
enabled | When set to false none of your handlers will be fired. |
See Demo And Download
Official Website(koca): Click Here
This superior jQuery/javascript plugin is developed by koca. For extra Advanced Usage, please go to the official website.
