vue自定义指令实现v

vue自定义指令实现v

放弃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 vueTaojFahraap })

} 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(http://这里的this是directve实例)上,最后在bind的地方绑定事件。这个我并没有找到规范，还不知道写哪比较好。

update : function(fn) {

var self = this; //存下this，方便以后用

//在directive上绑定的属性和方法

//都可通过self.xxx self.touchstart()获取

self.tapObj = {}; //初始化我们的tap对象

if(typeof fn !== 'functiaojFahraon') {

//你别给我搞事！

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可接受传参？

v-tap="args($index,el,$event)"

>

{{el.name}}---{{el.age}}

那就要在我们的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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。