• 热门专题

关于vue中的tap指令和事件实现的具体介绍

作者:whl  发布日期:2018-12-29 08:57:00
Tag标签:vue相关内容  tap指令实现  
  •   相信大家都知道vue里给我们提供了能够自定义进行指令实现的功能,可以说和组件是非常相似的,今天小编主要给大家详细介绍一下关于如何让自定义tap指令和事件能够实现的具体介绍,对这方面感兴趣的朋友不妨跟着小编一起来学习学习。

      Vue指令

      Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,详细可以参见vue官网自定义指令一节。

      2.v-tap指令实现

      我个人的理解,编写指令即是在vue指令对象提供的钩子函数中做相应的逻辑处理,tap指令是在bind钩子函数中做相应的处理, 首先,要明白的是tap是为了处理click事件在iphone上的存在300ms的延时,这样使得连续点击很不流畅,tap通过移动端的touchstart事件和touchend事件判断移动距离为零的话,则触发绑定的函数,话不多说,上代码:

    .v-tap指令实现

      使用示例: <div v-tap="{ name : mymethod, args:{arg1:11, args2:22} }"></div>

      3.总结

      当我们需要复用一些dom底层操作的时候,可以考虑使用vue directive的方式复用代码.

      下面看下vue tap事件的实现代码

    vue-tap.js

      前两天做了个tap.js插件,实现了移动端touch事件模拟click事件,解决点击延迟的问题,但是在vue中并不能用v-tap来调用,所以今天做了vue版的vue-tap.js。此前也曾用过其他的插件来实现v-tap,但方式仍有些累赘,于是便用了更简洁的方式来实现,下面附上代码(只支持vue2.0+)。

      Vue-tap.js

      Demo.html

    demo.html

      参考了其他vue-tap插件,但仍有需要完善的地方,后续更新。此外,在移动端解决点击延迟问题,还是比较推荐fastclick,兼容性较好且方便使用,不过相对而言模拟tap事件体积较小,也可以拿来练手了。

      总结

      上面就是今天小编给大家分享的关于vue中的自定义tap指令以及事件如何实现的具体操作教程了,上面的代码还是非常详细的,大家可以仔细研究研究。如果大家对于vue还想了解更多欢迎继续关注本站其他发文,小编这里就不一一进行讲解了。

延伸阅读:

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规