Repository files navigation

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 atngx-hammer

This plugin supports Vue >= 2.0.

Available through npm asvue2-hammer.

npm install vue2-hammer

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

<av-hammer:tap="onTap">Tap me!</a><divv-hammer:swipe.left="onSwipeLeft">Swipe me!</div><divv-hammer:swipe.left="(event)=> onSwipeLeft(event, item, i)">Swipe me!</div>

There are two ways to customize recognizer options such asdirection andthreshold. The first one is setting global options:

// change the threshold for all swipe recognizersVueHammer.config.swipe={threshold:200};

<av-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>

SeeHammer.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 likev-hammer:swipe.left. But if your combination is not exist in the hammer, it is not support.

• Runyarn ornpm i
• Runyarn build ornpm run build
• Open the index.html in the example directory.

MIT