Implementation of vue tap event

Two days ago, I made a plug-in of tap.js to simulate the click event of the touch event on the mobile terminal to solve the problem of click delay. However, in Vue, v-tap can not be used to call, so I made vue-tap.js today. Other plug-ins have been used to implement v-tap before, but the way is still cumbersome, so it is implemented in a more concise way, with the code attached below (only supporting 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>Simple call mode:</b>
	 v-tap="[Method, parameter 1, parameter 2...]"
	 
	<b>Get parameters:</b>
	methods:{
		tap:function(Parameter one, parameter two...){
		  console.log(Parameter one, parameter two...);
		}
	}
	
	<b>Prevent blistering:</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>

Reference to other Vue tap plug-ins, but there are still areas to improve, follow-up updates.

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

Tags: Vue github Mobile

Posted on Fri, 01 May 2020 13:28:22 -0700 by pleisar