vue2-touch-events
    Overview
    Documentation
    Insights
    Code
    Contributors
    Dependencies
    Alternatives

vue2-touch-events

Simple touch events support for vueJS2

2.0.0  •  Updated 1 years ago  •  by Jerry Bendy  •  MIT License

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 mouse
  • longtap for long tap
  • swipe for swipe your finger or mouse in a direction (left/top/right/bottom)
  • start for start tap or mouse down
  • end for tap end or mouse up
  • moving for moving finger or mouse

Install

To install with npm or yarn, use

npm i -S vue2-touch-events

// or

yarn add vue2-touch-events

Usage

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
})
  • 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 default 10. The tolerance to ensure whether the tap event effective or not.

  • swipeTolerance default 30. The tolerance to ensure whether the swipe event effective or not.

  • longTapTimeInterval default 400 in millsecond. The minimum time interval to detect whether long tap event effective or not.

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

Look at here

LICENSE

MIT License

Popularity

Weekly Downloads
10.1K
Stars
262

Maintenance

Development

Last ver 1 year ago
Created 3 years ago
Last commit 2 months ago
20 days between commits

Technology

Node version: 8.12.0
24K unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

6 contributors
Jerry Bendy
Maintainer, 31 commits, 6 merges, 1 PRs
Works at microBenefits
Tom Goethals
13 commits
Simon Tsvilik
2 commits, 1 PRs
Works at Solace Consulting, Inc.
Dan Girgenti
2 commits, 1 PRs
Works at Urban Outfitters urbn
Ryan Campbell
1 commits, 1 PRs
Works at kirasystems
carlos
1 commits, 1 PRs

Dependencies

Tags

vue
touch
tap
swipe
longtap
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.