
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <style>
    div {
      width: 300px;
      height: 300px;
      background-color: #f00;
    }
    </style>
    <script>
    document.addEventListener('touchmove', function(e){
        e.stopPropagation();
        e.preventDefault();
    });
    document.addEventListener('touchstart', function(e){
        e.stopPropagation();
        e.preventDefault();
    });
    </script>
  </head>
  <body>
    <div 
      v-touch:tap="test($event)" 
      v-touch:doubletap="test($event)" 
      v-touch:hold="test($event)" 
      v-touch:swipeleft="test($event)" 
      v-touch:swiperight="test($event)" 
      v-touch:rotateright="test($event)" 
      v-touch:rotateleft="test($event)" 
     v-text="event"></div>
    <script src="example.build.js"></script>
  </body>
</html>

var Vue = require('vue');
var VueTouch = require('vue-touchjs');

Vue.use(VueTouch);

new Vue({
    el: 'div',
    data: {
        event: ''
    },
    methods: {
        test: function(el, e) {
        // el 表示挂在事件的dom结点, 默认挂在事件的dom是handler的第一个参数，为了不改变
            e.stopPropagation();
            e.preventDefault();
            this.event = e.type;
            return false;
        }
    }
});

history

0.0.9

【add】在事件回调中将事件的挂接节点作为回调的第一个参数返回

Keywords

FAQs

What is vue-touchjs?

Is vue-touchjs popular?

Is vue-touchjs well maintained?

Last updated on 07 Mar 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install