1.1.0 • Published 9 years ago

vue-touch v1.1.0

Weekly downloads
9,207
License
MIT
Repository
github
Last release
9 years ago

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 global VueTouch.

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