Vue手机端实现touch,paste指令
2017-05-05 本文已影响729人
overflow_hidden
//directive.js
import Vue from 'vue'
/*touch事件*/
Vue.directive('touch',{
isTap: function(tapObj){
let isTap = Math.abs(tapObj.pagX-tapObj.endX) > 10 || Math.abs(tapObj.pagY-tapObj.endY) > 10;
let _x = tapObj.pagX-tapObj.endX;
let _y = tapObj.pagY-tapObj.endY;
let ads = Math.abs(_x)-Math.abs(_y)
if(_x > 10 && ads>0)
this.tapObj.direction = 'left'
if(_x < -10 && ads>0)
this.tapObj.direction = 'right'
if(tapObj.pagY-tapObj.endY > 10 && ads<0)
this.tapObj.direction = 'up'
if(tapObj.pagY-tapObj.endY < -10 && ads<0)
this.tapObj.direction = 'down'
return isTap;
},
update: function (fn) {
var me = this;
me.tapObj = {};
me.touches = [];
if(typeof fn !== 'function')
return console.error('The param of directive "v-touch" must be a function!');
me.handler = (e) => {
e.tapObj = me.tapObj;
fn.call(self,e);
}
this.el.addEventListener('touchstart',function(event){
me.touches = [];
let touches = event.touches[0];
me.touches.push(touches);
me.tapObj.pagX = touches.pageX;
me.tapObj.pagY = touches.pageY;
me.tapObj.clientX = touches.clientX;
me.tapObj.clientY = touches.clientY;
},false)
let movehandler = function(event){
this.touches.push(event.touches[0]);
let objStar = this.touches[0];
let objEnd = event.touches[0];
if(Math.abs(objStar.clientX - objEnd.clientX) > Math.abs(objStar.clientY - objEnd.clientY)){
event.preventDefault();
}
}
this.el.addEventListener('touchmove',movehandler.bind(this),false)
this.el.addEventListener('touchend',function(event){
if(me.touches.length>1){
let touches = me.touches.pop();
me.tapObj.endX = touches.pageX;
me.tapObj.endY = touches.pageY;
me.tapObj.clientEndX = touches.clientEndX;
me.tapObj.clientEndY = touches.clientEndY;
if (me.isTap(me.tapObj))
me.handler(event);
}
me.el.removeEventListener('touchmove',movehandler,false)
},false)
}
})
/*监听粘贴事件*/
Vue.directive('paste',{
update: function (fn) {
let me = this;
if(typeof fn !== 'function')
return console.error('The param of directive "v-parse" must be a function!');
me.handler = () => {
fn.call();
}
this.el.addEventListener('paste',function(event){
me.handler()
})
}
})