Skip to content

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

Notifications You must be signed in to change notification settings

gvdp/vue2-hammer

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

npm

Available through npm as vue2-hammer.

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

Usage

Using the v-hammer directive

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

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

Configuring Recognizer Options

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.

Supported gesrtures and directions

gestures

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

directions

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

Note

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 the Example

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

License

MIT

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 84.2%
  • Vue 11.2%
  • HTML 4.6%