🌜
🌞
vue-touch

vue-touch

v1.1.0

Hammer.js based touch events plugin for Vue.js

npm install vue-touch

README

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

Release Notes

2.0.0-beta.3
By Thorsten Lünborg • Published on January 16, 2017

New Features

The 'options' prop

Hammer accepts a few general options that are normally passed when creating a Hammer instance with new Hammer() or new Hammer.Manager().

In vue-touch, you can pass those options via the options prop:

Prop allowed Values
options https://hammerjs.github.io/api/#hammer.defaults

Example

<v-touch options="{ touchAction: 'pan' }" />
2.0.0-beta.2
By Thorsten Lünborg • Published on January 14, 2017

Bugfixes:

none.

New Features

  • Now SSR-compatible See README
  • New Prop: enabled
  <!-- enable all recognizers -->
<v-touch v-bind:enabled="true" v-on:tap="callback" />

  <!-- disable all recognizers -->
<v-touch v-bind:enabled="false" v-on:tap="callback" />

  <!-- pass an object to enable and disable recognizers individually -->
<v-touch v-bind:enabled="{ pinch: true, rotate: false }" v-on:tap="callback" />
2.0.0-beta.1
By Thorsten Lünborg • Published on January 6, 2017

This is the first Beta release of VueTouch 2.0.0, compatible with Vue 2.* and HammerJS 2.*

Installation

The beta release is available on npm with the next tag:

npm install [email protected]

Breaking Changes

As explained in #64, we re-wrote vue-touch from the ground up as a component, which is in line with the philosophy of Vue 2.0 to do more work in components and less with custom directives, whose responsibility was reduced to low-level DOM operations.

This, of course, means a complete breaking change in the API, but the switch should be manageable.

The new interface loos like this:

<v-touch tag="a" v-on:swiperight="callback" v-bind:swipe-options="{threshold: 150}">
  Swipe right to delete this
</v-touch>

For more information, see the README in the next branch.

New Features

The component exposes a few public methods that can be used to programmatically enable and disable some or all the recognizers.

<template>
  <v-touch ref="tapper" @tap="callback"></v-touch>
</template>
<script>
  export default {
    methods: {
      disableTap() {
        this.$refs.tapper.disable('tap')
      },
      enableTap() {
        this.$refs.tapper.enable('tap')
      }
    }
  }
</script>

For more information, see the README in the next branch.

Reporting Issues

As this is a Beta release, we would be happy if you could take it for a spin and report back any problems you come across with an issue in this repo.

General

License
MIT
Typescript Types
None found
Tree-shakeable
No

Popularity

GitHub Stargazers
2,711
Community Interest
3,184
Number of Forks
407

Maintenance

Commits
11/2110/2201
Last Commit
Dec 22, 2018
Open Issues
45
Closed Issues
57
Open Pull Requests
7
Closed Pull Requests
9

Versions

Versions Released
11/2110/2201
Latest Version Released
May 3, 2016
Current Tags
latest1.1.0
next2.0.0-beta.4

Dependencies

Dependencies (1)
Dev Dependencies (3)

Contributors

yyx990803
yyx990803
Commits: 11
appedemic
appedemic
Commits: 3
LinusBorg
LinusBorg
Commits: 2
rdsubhas
rdsubhas
Commits: 1
wprater
wprater
Commits: 1
kazupon
kazupon
Commits: 1
anvaka
anvaka
Commits: 1
msurguy
msurguy
Commits: 1
crswll
crswll
Commits: 1