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 相关文章推荐
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
javascript中的float运算精度实例分析
Aug 21 Javascript
js获取php变量的实现代码
Aug 10 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
js表单登陆验证示例
Oct 19 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 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冒泡算法详解(递归实现)
2014/11/10 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
python查看模块安装位置的方法
2018/10/16 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
Python 去除字符串中指定字符串
2020/03/05 Python
什么是python的id函数
2020/06/11 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
高中历史教学反思
2014/02/08 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
计划生育证明书写要求
2014/09/17 职场文书
年会邀请函范文
2015/01/30 职场文书
不同意离婚上诉状
2015/05/23 职场文书
南极大冒险观后感
2015/06/05 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android