vue-touch-events
Enable tap / swipe events for VueJS 2.x
Note: This is for Vue 2.x only.
Supports:
tap
for tap the screen or click the mouselongtap
for long tap (does not fire until touchend)longpress
for long press (fires when the duration is reached)swipe
for swipe your finger or mouse in a direction (left/top/right/bottom). Requires velocitystart
for start tap or mouse downend
for tap end or mouse upmoving
for moving finger or mousepan
for slower swipes (left/top/right/bottom)
Usage
Warning: does not play nice with vue-cli and webkit, will not import correctly
import Vue from 'vue'
import Vue2TouchEvents from 'vue2-touch-events'
Vue.use(Vue2TouchEvents)
In your .vue
file:
<!-- bind a tap event -->
<span v-touch:tap="touchHandler">Tap Me</span>
<!-- tap is the default event, you can omit it -->
<span v-touch="touchHandler">Tap Me</span>
<!-- bind the swipe event, no matter direction -->
<span v-touch:swipe="swipeHandler">Swipe Here</span>
<!-- only when swipe left can trigger the callback -->
<span v-touch:swipe.left="swipeHandler">Swipe Here</span>
<!-- bind a long tap event -->
<span v-touch:longtap="longtapHandler">Long Tap Event</span>
<!-- bind a start and end event -->
<span v-touch:start="startHandler" v-touch:end="endHandler">Down,start/Up,end Event</span>
<!-- bind a move and moving event -->
<span v-touch:moved="movedHandler">Triggered once when starting to move and tapTolerance is exceeded</span>
<span v-touch:moving="movingHandler">Continuously triggering Event</span>
<!-- you can even mix multiple events -->
<span v-touch:tap="tapHandler"
v-touch:longtap="longtapHandler"
v-touch:swipe.left="swipeLeftHandler"
v-touch:start="startHandler"
v-touch:end="endHandler"
v-touch:swipe.right="swipeRightHandler">Mix Multiple Events</span>
APIs
Global config (optional)
Vue.use(Vue2TouchEvents, {
touchClass: '',
tapTolerance: 10,
swipeTolerance: 30,
longTapTimeInterval: 400,
longPressDuration: 800,
swipeVelocity: .3
})
-
touchClass
default:''
. Add an extra CSS class when touch start, and remove it when touch end.This is a global config, and you can use
v-touch-class
directive to overwrite this setting in a single component. -
tapTolerance
default10
. The tolerance to ensure whether the tap event effective or not. -
swipeTolerance
default30
. The tolerance to ensure whether the swipe event effective or not. -
longTapTimeInterval
default400
in millsecond. The minimum time interval to detect whether long tap event effective or not. -
longPressDuration
default800
in millsecond. The minimum time interval to detect whether long press event is fired. -
swipeVelocity
default.3
velocity required to fire a swipe rather than a pan event (less allows slower swipes).
Directives
v-touch
Bind the v-touch
directive to components which you want to enable touch events.
v-touch
accepts an argument to tell it which event you want to bind.
<span v-touch:tap="tapHandler">Tap</span>
The first argument of the v-swipe
callback is the direction of swipe event. It could be left
, right
, top
or bottom
.
v-swipe
can accept extra modifiers. It means you can bind events only for specify direction.
export default {
methods: {
swipeHandler (direction) {
console.log(direction) // May be left / right / top / bottom
}
}
}
v-touch-class
v-touch-class
directive allows you set an extra class on your components. If you already have a global config touchClass
, this value will overwrite it.
For example:
<span v-touch:tap="touchHandler" v-touch-class="'active'">Tap Me</span>
Now, when you start to touch, it will add an extra active
class automatically. And remove it when touch end.
If your setting of disableClick
is false
(it's default), it will bind mouseenter
and mouseleave
events, too.
So that you can use this feature to instead of :active
and :hover
pseudo class, for a better user experience.
/* before */
span:active, span:hover {
background: green;
}
/* now, you can write like this */
span.active {
background: green;
}
Modifiers
left, right, top, bottom
This four modifiers are for v-touch:swipe
only, to specify which direction you want to bind events to.
self
Same as v-on:click.self
, only trigger events when the event target is the currentTarget
.
stop
Same as v-on:click.stop
, stops event propagation.
prevent
Same as v-on:click.prevent
, prevents default event handler from firing.
Others
How to add extra parameters
As mentioned by #3, if you want to add extra
parameters for v-touch
, you can't do that like v-on
. The hack is that you can let your method returns
a function
and handle the extra parameters in the returned function.
<div v-touch:swipe="myMethod('myOtherParam')">Swipe</div>
export default {
methods: {
myMethod (param) {
return function(direction, event) {
console.log(direction, param);
// do something ~
}
}
}
}
Change History
LICENSE
MIT License