美文网首页
Vue手机端实现touch,paste指令

Vue手机端实现touch,paste指令

作者: overflow_hidden | 来源:发表于2017-05-05 18:17 被阅读729次
    //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()
            })
      }
    })

    相关文章

      网友评论

          本文标题:Vue手机端实现touch,paste指令

          本文链接:https://www.haomeiwen.com/subject/hsestxtx.html