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 相关文章推荐
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
javascript实现连续赋值
Aug 10 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
详解微信小程序图片地扯转base64解决方案
Aug 18 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
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
three.js 入门案例详解
2018/01/23 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
用python实现百度翻译的示例代码
2018/03/09 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
使用Python构造hive insert语句说明
2020/06/06 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
Python编写万花尺图案实例
2021/01/03 Python
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
人事专员的岗位职责
2014/03/01 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python