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

金大光

于 2017-09-27 15:01:49 发布

阅读量8.9w

点赞数 6

分类专栏： vue 文章标签： vue touch vue-touch tap directive

本文链接：https://blog.csdn.net/qq_17757973/article/details/78112976

版权

用法：

**HTML**
<div class="box" 
    v-tap="(e)=>vueTouch('点击',e)" 
    v-longtap="(e)=>vueTouch('长按',e)" 
    v-swipeleft="(e)=>vueTouch('左滑',e)"
    v-swiperight="(e)=>vueTouch('右滑',e)"
    v-swipeup="(e)=>vueTouch('上滑',e)"
    v-swipedown="(e)=>vueTouch('下滑',e)"
 >{
  { name }}</div>

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

js核心内容

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=type