Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vuejs/vue-touch
Hammer.js wrapper for Vue.js
https://github.com/vuejs/vue-touch
Last synced: about 1 month ago
JSON representation
Hammer.js wrapper for Vue.js
- Host: GitHub
- URL: https://github.com/vuejs/vue-touch
- Owner: vuejs
- License: mit
- Archived: true
- Created: 2014-02-07T23:08:20.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-12-22T12:49:01.000Z (almost 6 years ago)
- Last Synced: 2024-04-14T06:55:39.979Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 310 KB
- Stars: 2,730
- Watchers: 88
- Forks: 403
- Open Issues: 52
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - **vue-touch ★220**
- awesome-vue-js - Vue Touch
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`.
``` js
var VueTouch = require('vue-touch')
Vue.use(VueTouch)
```
#### Direct include
- You can also directly include it with a `` 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
``` html
<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:
``` js
// 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:
``` html
<!-- 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
``` js
// 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
})
```
``` html
<a v-touch:doubletap="onDoubleTap"></a>
```
See [Hammer.js documentation](http://hammerjs.github.io/getting-started/) for all available events.
See `/example` for a multi-event demo. To build it, run `npm install && npm run build`.
## License
[MIT](http://opensource.org/licenses/MIT)