0.0.2 • Published 2 years ago
vuse-gesture v0.0.2
vuse-gesture
vuse-gesture is a Vue 3 library that lets you bind richer mouse and touch events to any component or view. With the data you receive, it becomes trivial to set up gestures, and often takes no more than a few lines of code.
You can use it stand-alone, but to make the most of it you should combine it with an animation library like vue-use-spring, though you can most certainly use any other.
Installation
pnpm add vuse-gesture # or npm or yarn
Usage
<script setup>
import { useSpring } from 'vue-use-spring'
import { normalizeProps, useDrag } from 'vuse-gesture'
const position = useSpring({ x: 0, y: 0 })
const bind = useDrag(({ down, movement: [mx, my] }) => {
position.x = down ? mx : 0
position.y = down ? my : 0
})
</script>
<template>
<div
id="box"
v-bind="normalizeProps(bind())"
:style="{
touchAction: 'none',
transform: `translate(${position.x}px, ${position.y}px)`,
}"
/>
</template>
License
MIT License © 2022 Robert Soriano
0.0.2
2 years ago