vue-touch-easyhi

Hammer.js wrapper for Vue.js

Showing:

Popularity

Downloads/wk

12

GitHub Stars

2.7K

Maintenance

Last Commit

3yrs ago

Contributors

12

Package

Dependencies

1

Size (min+gzip)

7.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

This plugin is deprecated and not maintained anymore.

vue-touch

Touch events plugin for Vue.js. This plugin does not support Vue 2.0 yet.

This is a directive wrapper for Hammer.js 2.0.

Install

This branch is only compatible with Vue 1.0. For the Vue 2.0 compatible rewrite, see the next branch

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial