vue自定义指令完成v-tap插件

媒介

摒弃jQuery,拥抱MVVM,拥抱组件吧!

vue-touch基于hammer,关于一般简朴手势的页面来讲过于巨大!

因而想本身完成一个最经常使用的手势tap。顺着自定义指令和插件文档,昨晚完成了一个v-tap指令,丢出这篇干货。

指令与插件引见

自定义指令和插件官方文档中也引见比较简朴细致,就不过量引见。

我先说下本插件就用了三个API,假如人人不相识最好先事前看下文档防止背面的代码看的含糊。

指令部份

  • 1.update(nVal,oVal)

  • 2.acceptStatement

插件部份

  • Vue.use()

接着我们须要像写jQuery插件一样进修写Vue插件的花样。

继承官方文档

MyPlugin.install = function (Vue, options) {
  // 1. 增加全局要领或属性
  Vue.myGlobalMethod = ...
  // 2. 增加全局资本
  Vue.directive('my-directive', {})
  // 3. 增加实例要领
  Vue.prototype.$myMethod = ...
}

是不是是看的还不太邃晓?那我们能够直接看作者的插件代码。

;(function () {

  var vueTouch = {}
  
  vueTouch.install = function (Vue) {

    Vue.directive('touch', {

      isFn: true,
      acceptStatement: true,

      bind: function () {
        
      },

      update: function (fn) {
       
      },

      unbind: function () {
       
      }
    })
  }


  if (typeof exports == "object") {
    module.exports = vueTouch
  } else if (typeof define == "function" && define.amd) {
    define([], function(){ return vueTouch })
  } else if (window.Vue) {
    window.VueTouch = vueTouch
    Vue.use(vueTouch)
  }

})()

我把过剩无关代码都删除了,能够发明实在花样就是云云,剩下的就是应用我们本身js的功底直接编写即可。

PS:关于 isFn:true 这个属性,我在文档中没有查到相干信息,个人认为多是一种解释,代表这个指令是须要fn的expression(这个是指令的表达式,详见指令实例属性)。

Just do it

起首,根据插件花样先写好外层。

;(function() {
    var vueTap = {};
    vueTap.install = function(Vue) {
        
    };

    if (typeof exports == "object") {
        module.exports = vueTap;
    } else if (typeof define == "function" && define.amd) {
        define([], function(){ return vueTap })
    } else if (window.Vue) {
        window.vueTap = vueTap;
        Vue.use(vueTap);
    }

})();

接着在我们的 vueTap.install 里写我们本身的自定义指令

Vue.directive('tap', {
        isFn : true,
        bind : function() {
             
        },
        update : function(fn) {
            
        },
        unbind : function() {},
        isTap : function() {
            //推断是不是为tap
        },
        touchstart : function(e,self) {
            
        },
        touchend : function(e,self) {
            
        }
    });
};

因为只要update才有参数可传,能够吸收到我们expression,因而我把事宜绑定处置惩罚历程都写在了update里。

PS: 固然也有小伙伴喜好在这把fn都给予在this(这里的this是directve实例)上,末了在bind的处所绑定事宜。这个我并没有找到范例,还不晓得写哪比较好。

update : function(fn) {
    var self = this; //存下this,轻易以后用
        //在directive上绑定的属性和要领
        //都可经由过程self.xxx   self.touchstart()猎取
        self.tapObj = {}; //初始化我们的tap对象

    if(typeof fn !== 'function') {
    //你别给我搞事!
        return console.error('The param of directive "v-tap" must be a function!');
    }
    
    self.handler = function(e) { //给当前directive存个handler轻易以后挪用
        e.tapObj = self.tapObj; 
        //把我们的tap对象赋值给原生event对象上,轻易回调里猎取参数
        fn.call(self,e);
    };
    
    //把我们的start和end剥离出来,写在directive上
    //因为只要tap事宜,所以我们在move历程就不须要做处置惩罚
    this.el.addEventListener('touchstart',function(e) {
        self.touchstart(e,self);
    },false);
    
    this.el.addEventListener('touchend',function(e) {
        self.touchend(e,self,fn);
    },false);
    
}

在update很简朴,就是一些初始化,事宜绑定和给实例赋值的历程。

末了就是isTap,touchstart,touchend的逻辑处置惩罚。

isTap : function() {
    var tapObj = this.tapObj;
    return this.time < 150 && Math.abs(tapObj.distanceX) < 2 && Math.abs(tapObj.distanceY) < 2;
},
touchstart : function(e,self) {
    var touches = e.touches[0];
    var tapObj = self.tapObj;
    tapObj.pageX = touches.pageX;
    tapObj.pageY = touches.pageY;
    tapObj.clientX = touches.clientX;
    tapObj.clientY = touches.clientY;
    self.time = +new Date();
},
touchend : function(e,self) {
    var touches = e.changedTouches[0];
    var tapObj = self.tapObj;
    self.time = +new Date() - self.time;
    tapObj.distanceX = tapObj.pageX - touches.pageX;
    tapObj.distanceY = tapObj.pageY - touches.pageY;

    if (self.isTap(tapObj))
        self.handler(e);
}

末了有个大问题,怎样能让我们的expression可接收传参?

<ul>
    <li v-for="el in list"
        v-tap="args($index,el,$event)"
            >
        {{el.name}}---{{el.age}}
    </li>
</ul>

那就要在我们的directive上加一个属性acceptStatement:true(详见文档acceptStatement)

总结

写了这个v-tap插件几个心得分享给人人。

  • 1.在update里的this指向是directive实例,而不是vm,也不是dom

  • 2.在directive(‘name’,{}) 对象里可自定义属性和要领。挪用就是self.xxx

  • 3.开启自定义指令接收内联语句 acceptStatement:true

  • 4.末了的接口别忘了 Vue.use(obj)

我这里没有对v-tap.stop, v-tap.prevent,v-tap.stop.prevent做处置惩罚,人人能够本身完成!也灰常简朴。
(我以后会对v-tap举行补充)

末了丢出github地点:https://github.com/MeCKodo/vu…

    原文作者:二哲
    原文地址: https://segmentfault.com/a/1190000004108445
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞