放弃jQuery,拥抱MVVM,拥抱组件吧!
vue-touch基于hammer,对于普通简单手势的页面来说过于庞大! 于是想自己实现一个最常用的手势tap。顺着自定义指令和插件文档,昨晚实现了一个v-tap指令,丢出这篇干货。
指令与插件介绍
自定义指令和插件官方文档中也介绍比较简单详细,就不过多介绍。 我先说下本插件就用了三个API,如果大家不了解最好先事先看下文档避免后面的代码看的迷糊。指令部分 1.update(nVal,oVal) 2.acceptStatement
插件部分 Vue.use()
接着我们需要像写jQuery插件一样学习写Vue插件的格式。
继续官方文档
是不是看的还不太明白?那我们可以直接看作者的插件代码。
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:关于
Just do it
首先,按照插件格式先写好外层。
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);
}
})();
接着在我们的
},unbind : function() {},isTap : function() { },touchend : function(e,self) { } 由于只有update才有参数可传,可以接收到我们expression,于是我把事件绑定处理过程都写在了update里。
PS: 当然也有小伙伴喜欢在这把fn都赋予在this(这里的this是directve实例)上,最后在bind的地方绑定事件。这个我并没有找到规范,还不知道写哪比较好。
self.handler = function(e) { //给当前directive存个handler方便之后调用 //把我们的start和end剥离出来,写在directive上 this.el.addEventListener('touchend',function(e) { } 在update很简单,就是一些初始化,事件绑定和给实例赋值的过程。
最后就是isTap,touchstart,touchend的逻辑处理。
最后有个大问题,如何能让我们的expression可接受传参?
那就要在我们的directive上加一个属性acceptStatement:true(详见文档acceptStatement)
//判断是否为tap
},touchstart : function(e,self) {
});
};
//你别给我搞事!
return console.error('The param of directive "v-tap" must be a function!');
}
e.tapObj = self.tapObj;
//把我们的tap对象赋值给原生event对象上,方便回调里获取参数
fn.call(self,e);
};
//由于只有tap事件,所以我们在move过程就不需要做处理
this.el.addEventListener('touchstart',function(e) {
self.touchstart(e,self);
},false);
self.touchend(e,self,fn);
},false);
self.handler(e);
}
总结
写了这个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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。