//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)
}
})
/*監(jiān)聽粘貼事件*/
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()
})
}
})
Vue手機(jī)端實(shí)現(xiàn)touch,paste指令
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 一、修改postcssrc.js 文件 二、index.html文件 三、static 目錄中放入meta.js文...
- (By: Kath & kimmy) 最近在做的一個(gè)幾月vue的移動(dòng)端小demo,其中有一塊是實(shí)現(xiàn)各個(gè)頁面的統(tǒng)一換...
- 手機(jī)端html5觸屏事件(touch事件) touchstart:觸摸開始的時(shí)候觸發(fā) touchmove:手指在屏...
- http://blog.csdn.net/wangjiaohome/article/details/4936417...
- vue 中的自定義指令是對(duì)底層 dom 進(jìn)行操作,下面以實(shí)現(xiàn)滾動(dòng)到底部加載數(shù)據(jù),實(shí)現(xiàn)無限加載來介紹如何自定義一個(gè)簡(jiǎn)...