vue-hammer

Hammer.js wrapper for Vue to support some operation in the mobile

This is a directive wrapper for Hammer.js 2.x. And this repo'inspiration is from v-touch.

Install

This plugin supports Vue >= 2.0.

Available through npm as vue2-hammer.

npm install vue2-hammer

import { VueHammer } from 'vue2-hammer'
Vue.use(VueHammer)

<a v-hammer:tap="onTap">Tap me!</a>

<div v-hammer:swipe.left="onSwipeLeft">Swipe me!</div>

There are two ways to customize recognizer options such as direction and threshold. The first one is setting global options:

// change the threshold for all swipe recognizers
VueHammer.config.swipe = {
  threshold: 200
}

<a v-hammer:doubletap="onDoubleTap"></a>

See Hammer.js documentation for all available events.

tap, pan, pinch, press, rotate, swipe, doubletap

up, down, left, right, horizontal, vertical, all

Users can use both the gesture and the direction like v-hammer:swipe.left. But if your combination is not exist in the hammer, it is not support.