Bind Mouse And Touch Events To Any Component Or View – UseGesture

Install & Download:

# Yarn
$ yarn add vue-use-gesture
# NPM
$ npm i vue-use-gesture

Description:

Vue UseGesture is a hook 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.

Hookd Included:

  • 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

How to use it:

1. Import the UseGesture.

import { useDrag } from ‘vue-use-gesture’
import { useSpring } from ‘vue-use-spring’
import { defineComponent, computed } from ‘vue’

2. Basic usage.

<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 }
  },
})

Preview:

Bind Mouse And Touch Events To Any Component Or View - UseGesture

Tags:

Add Comment