1.1.0 • Published 9 years ago
vue-touch v1.1.0
vue-touch
Touch events plugin for Vue.js
This is a directive wrapper for Hammer.js 2.0.
Install
CommonJS
Available through npm as
vue-touch
.var VueTouch = require('vue-touch') Vue.use(VueTouch)
Direct include
- You can also directly include it with a
<script>
tag when you have Vue and Hammer.js already included globally. It will automatically install itself, and will add a globalVueTouch
.
Usage
Using the v-touch
directive
<a v-touch:tap="onTap">Tap me!</a>
<div v-touch:swipeleft="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
VueTouch.config.swipe = {
threshold: 200
}
Or, you can use the v-touch-options
directive to configure the behavior on a specific element:
<!-- detect only horizontal pans with a threshold of 100 -->
<a
v-touch:pan="onPan"
v-touch-options:pan="{ direction: 'horizontal', threshold: 100 }">
</a>
Registering Custom Events
// example registering a custom doubletap event.
// the `type` indicates the base recognizer to use from Hammer
// all other options are Hammer recognizer options.
VueTouch.registerCustomEvent('doubletap', {
type: 'tap',
taps: 2
})
<a v-touch:doubletap="onDoubleTap"></a>
See Hammer.js documentation for all available events.
See /example
for a multi-event demo. To build it, run npm install && npm run build
.
License
MIT
2.0.0-beta.4
9 years ago
2.0.0-beta.3
9 years ago
2.0.0-beta.2
9 years ago
2.0.0-beta.1
9 years ago
1.1.0
9 years ago
1.0.2
10 years ago
1.0.1
10 years ago
1.0.0
10 years ago
0.1.2
11 years ago
0.1.1
11 years ago
0.1.0
11 years ago
0.0.2
11 years ago
0.0.1
11 years ago