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.

If you want to find a same wrapper for Angular4+, you can have a look at ngx-hammer

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> <div v-hammer:swipe.left="(event)=> onSwipeLeft(event, item, i)">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:tap="onTap" v-hammer:pan.horizontal="onPanHorizontal" v-hammer:panstart="onPanStart" v-hammer:panend="onPanEnd" v-hammer:press="onPress" v-hammer:pressup="onPressup" ></a> <a ></a> <a ></a>

See Hammer.js documentation for all available events.

tap, pan, pinch, press, rotate, swipe

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.

• Run yarn or npm i
• Run yarn build or npm run build
• Open the index.html in the example directory.

MIT