转载

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/vue-tap

正文到此结束
Loading...