v-touch

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

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!

new Vue({
  el: '#app',
  template: `<div class="container">
  tap: {{ tapNum }},<br>
  dblTap: {{ dblTapNum }},<br>
  mltTap: {{ mltTapNum }}, lastMltTapped: {{ lastMltTapped }}<br>
  press: {{ pressNum }},<br>
  swipeLeft: {{ swipeLeftNum }},<br>
  swipeRight: {{ swipeRightNum }},<br>
  swipeUp: {{ swipeUpNum }},<br>
  swipeDown: {{ swipeDownNum }}
  <br>
  <div v-touch="touch" @dblclick="dblclickOuter">
    <button class="my-btn" @tap="click">{{ msg }}</button>
    <div @dblclick="dblclick">
      <button class="my-btn">Just Another Button</button>
    </div>
  </div>
  <br>
  <br>
  <button class="btn btn-default" @click="toggle('x')">toggle x ({{ x }})</button>
  <button class="btn btn-default" @click="toggle('y')">toggle y ({{ y }})</button>
</div>`,
  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]