vue自定义tap指令及tap事件的实现


Posted in Javascript onSeptember 18, 2018

1.Vue指令

Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,详细可以参见vue官网自定义指令一节(https://cn.vuejs.org/v2/guide/custom-directive.html).

2.v-tap指令实现

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

Vue.directive('tap',{
 bind(el, binding, vNode){
 let expression = binding.value;
 let handler = expression.name;
 let args = expression.args

 on(el, 'touchstart', (e)=>{
  
  let startX = e.changedTouches[0].clientX;
  let startY = e.changedTouches[0].clientY;

  once(el, 'touchend',(ev)=>{

  let disX = Math.abs(ev.changedTouches[0].clientX-startX);
  let disY = Math.abs(ev.changedTouches[0].clientY-startY);

  if(disX == 0 && disY ==0){
   handler(args);
  }
  })
 })
 }
})

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

3.总结

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

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

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

vue-tap.js

/*!
 * vue-tap.js
 * by weijianhua https://github.com/weijhfly/vue-tap
*/
;(function (factory) {
 if (typeof define === 'function' && define.amd) {
 define(function(){return factory;});
 }else if (typeof exports == "object") {
 module.exports = factory;
 }else{
 Vue.use(factory);
 }
}({
 master:{
 bind: function (el, binding) {
 var isTouch = "ontouchend" in document;
 el.exec = function (e) {
 var data = binding.value;
 data[0].apply(this, data.slice(1));
 };
 if (isTouch) {
 //touchstart
 el.addEventListener('touchstart', function (e) {
 binding.modifiers.stop && (e.stopPropagation());
 var t = e.touches[0];
 el.startX = t.clientX;
 el.startY = t.clientY;
 el.sTime = + new Date;
 });
 //touchend
 el.addEventListener('touchend', function (e) {
 binding.modifiers.stop && (e.stopPropagation());
 var t = e.changedTouches[0];
 el.endX = t.clientX;
 el.endY = t.clientY;
 if((+ new Date)-el.sTime<300){
 if(Math.abs(el.endX-el.startX)+Math.abs(el.endY-el.startY)<20){
 e.preventDefault();
 el.exec();
 }
 }
 });
 }else {
 //click
 el.addEventListener('click', function (e) {
 binding.modifiers.stop && (e.stopPropagation());
 el.exec();
 });
 }
 },
 componentUpdated : function(el,binding) {
 el.exec = function () {
 var data = binding.value;
 data[0].apply(this, data.slice(1));
 };
 },
 unbind: function (el) {
 el.exec = null;
 }
 },
 install:function(){
 Vue.directive('tap', this.master);
 }
}))

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0" />
 <title>vue plugin test</title>
 <style type="text/css">
 strong{
 font-size: 15px;
 }
 pre{
 padding: 16px 0;
 overflow: auto;
 line-height: 1.45;
 background-color: #f6f8fa;
 border-radius: 3px;
 }
 </style>
</head>
<body style="padding:30px;">
<div id="app">
 <pre>
 <strong>vue-tap.js</strong>
 
 <b>简洁的调用方式:</b>
 v-tap="[方法,参数一,参数二...]"
 
 <b>获取参数:</b>
 methods:{
 tap:function(参数一,参数二...){
 console.log(参数一,参数二...);
 }
 }
 
 <b>阻止冒泡:</b>
 v-tap.stop
 </pre>
 <hr>
 <div v-for="(l,i) in list">
 <div v-tap="[tap,l,i]">li-{{l}}-{{i}}</div>
 </div>
 <br>
 <hr>
 <div v-tap="[test,'parent']">
 parent<br><br>
 <button v-tap.stop="[test,'son']">stop propagation</button>
 </div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
<script src="vue-tap.js"></script>
<script>
 new Vue({
 el:'#app',
 data:{
 list:['a','b','c','e','f']
 },
 methods:{
 tap:function(i,k){
 console.log(i,k);
 },
 test:function(i){
 console.log(i);
 }
 }
 })
 if(window.innerWidth < 768){
 document.getElementsByTagName('body')[0].style.padding = 0;
 }
</script>
</body>
</html>

github:https://github.com/weijhfly/vue-tap

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

总结

以上所述是小编给大家介绍的vue自定义tap指令及tap事件的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
javascript cookie的简单应用
Feb 24 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
Angular2的管道Pipe的使用方法
Nov 07 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
JS代码实现页面切换效果
Jan 10 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 #Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 #Javascript
记React connect的几种写法(小结)
Sep 18 #Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 #Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 #Javascript
JavaScript指定断点操作实例教程
Sep 18 #Javascript
对VUE中的对象添加属性
Sep 18 #Javascript
You might like
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php swoft框架实例用法
2020/12/22 PHP
js工具方法弹出蒙版
2013/05/08 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
JS继承用法实例分析
2015/02/05 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
js动态引入的四种方法
2018/05/05 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
Python中__init__和__new__的区别详解
2014/07/09 Python
python中实现php的var_dump函数功能
2015/01/21 Python
Python使用turtule画五角星的方法
2015/07/09 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
用python解压分析jar包实例
2020/01/16 Python
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
欢迎标语大全
2014/06/21 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
合作意向书范本
2019/04/17 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
Python OpenCV超详细讲解基本功能
2022/04/02 Python
python基础之//、/与%的区别详解
2022/06/10 Python