vue自定义移动端touch事件之点击、滑动、长按事件

**html**
<div id="app" class="box" 
  v-tap="vuetouch" //vuetouch为函数名，如没有参数，可直接写函数名
  v-longtap="{fn:vuetouch,name:'长按'}" //如果有参数以对象形式传，fn 为函数名
  v-swipeleft="{fn:vuetouch,name:'左滑'}"
  v-swiperight="{fn:vuetouch,name:'右滑'}"
  v-swipeup="{fn:vuetouch,name:'上滑'}"
  v-swipedown="{fn:vuetouch,name:'下滑'}"
>{{ name }}</div>

**js**
kim=new vue({
  el:"#app",
  data:{
    name:"开始"
  },
  methods:{
    vuetouch:function(s,e){
      this.name=s.name;
    }
  }
});

function vuetouch(el,binding,type){
  var _this=this;
  this.obj=el;
  this.binding=binding;
  this.touchtype=type;
  this.vuetouches={x:0,y:0};
  this.vuemoves=true;
  this.vueleave=true;
  this.longtouch=true;
  this.vuecallback=typeof(binding.value)=="object"?binding.value.fn:binding.value;
  this.obj.addeventlistener("touchstart",function(e){
    _this.start(e);
  },false);
  this.obj.addeventlistener("touchend",function(e){
    _this.end(e);
  },false);
  this.obj.addeventlistener("touchmove",function(e){
    _this.move(e);
  },false);
};
vuetouch.prototype={
  start:function(e){
    this.vuemoves=true;
    this.vueleave=true;
    this.longtouch=true;
    this.vuetouches={x:e.changedtouches[0].pagex,y:e.changedtouches[0].pagey};
    this.time=settimeout(function(){
      if(this.vueleave&&this.vuemoves){
        this.touchtype=="longtap"&&this.vuecallback(this.binding.value,e);
        this.longtouch=false;
      };
    }.bind(this),1000);
  },
  end:function(e){
    var disx=e.changedtouches[0].pagex-this.vuetouches.x;
    var disy=e.changedtouches[0].pagey-this.vuetouches.y;
    cleartimeout(this.time);
    if(math.abs(disx)>10||math.abs(disy)>100){
      this.touchtype=="swipe"&&this.vuecallback(this.binding.value,e);
      if(math.abs(disx)>math.abs(disy)){
        if(disx>10){
          this.touchtype=="swiperight"&&this.vuecallback(this.binding.value,e);
        };
        if(disx<-10){
          this.touchtype=="swipeleft"&&this.vuecallback(this.binding.value,e);
        };
      }else{
        if(disy>10){
          this.touchtype=="swipedown"&&this.vuecallback(this.binding.value,e);
        };
        if(disy<-10){
          this.touchtype=="swipeup"&&this.vuecallback(this.binding.value,e);
        }; 
      };
    }else{
      if(this.longtouch&&this.vuemoves){
        this.touchtype=="tap"&&this.vuecallback(this.binding.value,e);
        this.vueleave=false
      };
    };
  },
  move:function(e){
    this.vuemoves=false;
  }
};
vue.directive("tap",{
  bind:function(el,binding){
    new vuetouch(el,binding,"tap");
  }
});
vue.directive("swipe",{
  bind:function(el,binding){
    new vuetouch(el,binding,"swipe");
  }
});
vue.directive("swipeleft",{
  bind:function(el,binding){
    new vuetouch(el,binding,"swipeleft");
  }
});
vue.directive("swiperight",{
  bind:function(el,binding){
    new vuetouch(el,binding,"swiperight");
  }
});
vue.directive("swipedown",{
  bind:function(el,binding){
    new vuetouch(el,binding,"swipedown");
  }
});
vue.directive("swipeup",{
  bind:function(el,binding){
    new vuetouch(el,binding,"swipeup");
  }
});
vue.directive("longtap",{
  bind:function(el,binding){
    new vuetouch(el,binding,"longtap");
  }
});

<div v-for="item in items" :key="item.id">
 <!-- 内容 -->
</div>

vue.directive("tap",{
  bind:function(el,binding,vnode){
    vnode.key = randomstring()//randomstring会返回一个随机字符串
    new vuetouch(el,binding,"tap");
  }
});