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 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
原生js实现弹出层效果
Jan 20 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 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
截获网站title标签之家内容的例子
2006/10/09 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
XML文档面试题
2015/08/05 面试题
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
元旦获奖感言
2014/03/08 职场文书
项目投资意向书
2014/04/01 职场文书
团拜会策划方案
2014/06/07 职场文书
招商引资工作汇报
2014/10/28 职场文书
作风建设年度心得体会
2014/10/29 职场文书
2014年车间工作总结
2014/11/21 职场文书
商务考察邀请函模板
2015/02/02 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL