https://github.com/jounqin/v-touch
A full-featured gesture directive designed for Vue
https://github.com/jounqin/v-touch
Last synced: 3 months ago
JSON representation
A full-featured gesture directive designed for Vue
- Host: GitHub
- URL: https://github.com/jounqin/v-touch
- Owner: JounQin
- License: mit
- Created: 2016-11-08T13:09:59.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2025-04-17T15:13:10.000Z (6 months ago)
- Last Synced: 2025-07-01T13:06:58.177Z (3 months ago)
- Language: JavaScript
- Homepage: https://jsfiddle.net/JounQin/ysvozkLo/embedded
- Size: 482 KB
- Stars: 31
- Watchers: 4
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# v-touch
[](https://greenkeeper.io/)
[](https://david-dm.org/JounQin/v-touch)
[](https://david-dm.org/JounQin/v-touch?type=dev)
A full-featured gesture component designed for Vue
~~__*This module is still working in progress right now, so it is just for placeholder.*__~~
Now, you can try to use `v-touch` in your project!
## Usage
A deadly simply example:
[see this on jsfiddle](https://jsfiddle.net/JounQin/ysvozkLo/)
If you are also working with `vue-touch`, you can use `Vue.use(VTouch, {name: 'move'})` (or something else), so that the directive name will change to `v-move`!
``` js
new Vue({
el: '#app',
template: `
tap: {{ tapNum }},
dblTap: {{ dblTapNum }},
mltTap: {{ mltTapNum }}, lastMltTapped: {{ lastMltTapped }}
press: {{ pressNum }},
swipeLeft: {{ swipeLeftNum }},
swipeRight: {{ swipeRightNum }},
swipeUp: {{ swipeUpNum }},
swipeDown: {{ swipeDownNum }}
{{ msg }}
Just Another Button
toggle x ({{ x }})
toggle y ({{ y }})
`,
data() {
return {
msg: 'try to touch, move, swipe, press me!',
x: false,
y: false,
tapNum: 0,
dblTapNum: 0,
mltTapNum: 0,
lastMltTapped: 0,
pressNum: 0,
swipeLeftNum: 0,
swipeRightNum: 0,
swipeUpNum: 0,
swipeDownNum: 0
}
},
computed: {
touch() {
return {
x: this.x,
y: this.y,
methods: true
}
}
},
methods: {
toggle(prop) {
this[prop] = !this[prop]
},
tap(e) {
this.tapNum++
},
dblTap() {
this.dblTapNum++
},
mltTap({tapped}) {
this.mltTapNum++
this.lastMltTapped = tapped
},
press() {
this.pressNum++
},
swipeLeft() {
this.swipeLeftNum++
},
swipeRight() {
this.swipeRightNum++
},
swipeUp() {
this.swipeUpNum++
},
swipeDown() {
this.swipeDownNum++
},
click() {
console.log('clicked the first button')
},
dblclick() {
console.log('dblclicked the second one')
},
dblclickOuter() {
console.log('dblclicked')
}
}
})
```
## Document
[WIP]