instruction
Vue provides the functions of custom implementation instructions, similar to components, and can be global and local instructions. For details, please refer to the section on the custom instructions on the vue official website (/v2/guide/).
-tap instruction implementation
My personal understanding is that writing instructions is to do corresponding logical processing in the hook function provided by the vue instruction object. The tap instruction is to do corresponding processing in the bind hook function. First of all, it is important to understand that tap is to handle the existence of click events on the iPhone for 300ms delay, which makes continuous clicks very unsmooth. If the tap determines that the moving distance is zero through the touchstart event and touchend event on the mobile terminal, the bound function will be triggered. Without further ado, the above code:
('tap',{
bind(el, binding, vNode){
let expression = ;
let handler = ;
let args =
on(el, 'touchstart', (e)=>{
let startX = [0].clientX;
let startY = [0].clientY;
once(el, 'touchend',(ev)=>{
let disX = ([0].clientX-startX);
let disY = ([0].clientY-startY);
if(disX == 0 && disY ==0){
handler(args);
}
})
})
}
})
Example of usage:<div v-tap="{ name : mymethod, args:{arg1:11, args2:22} }"></div>
3. Summary
When we need to reuse some underlying dom operations, we can consider using vue directive to reuse the code.
Let's see the implementation code of the vue tap event
I made a plug-in two days ago, implementing the mobile touch event to simulate click events to solve the problem of click delay, but it cannot be called with v-tap in vue, so I made the vue version today. I have used other plug-ins to implement v-tap before, but the method is still a bit cumbersome, so I used a simpler way to implement it, with the following code (only support vue2.0+).
/*!
*
* by weijianhua /weijhfly/vue-tap
*/
;(function (factory) {
if (typeof define === 'function' && ) {
define(function(){return factory;});
}else if (typeof exports == "object") {
= factory;
}else{
(factory);
}
}({
master:{
bind: function (el, binding) {
var isTouch = "ontouchend" in document;
= function (e) {
var data = ;
data[0].apply(this, (1));
};
if (isTouch) {
//touchstart
('touchstart', function (e) {
&& (());
var t = [0];
= ;
= ;
= + new Date;
});
//touchend
('touchend', function (e) {
&& (());
var t = [0];
= ;
= ;
if((+ new Date)-<300){
if(()+()<20){
();
();
}
}
});
}else {
//click
('click', function (e) {
&& (());
();
});
}
},
componentUpdated : function(el,binding) {
= function () {
var data = ;
data[0].apply(this, (1));
};
},
unbind: function (el) {
= null;
}
},
install:function(){
('tap', );
}
}))
<!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 >
<pre>
<strong></strong>
<b>A simple way to call：</b>
v-tap="[Method, Parameter One, Parameter Two...]"
<b>Get parameters：</b>
methods:{
tap:function(Parameter 1，Parameter Two...){
(Parameter 1，Parameter Two...);
}
}
<b>Stop bubbles：</b>
</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 ="[test,'son']">stop propagation</button>
</div>
</div>
<script src="/vue/2.5.13/"></script>
<script src=""></script>
<script>
new Vue({
el:'#app',
data:{
list:['a','b','c','e','f']
},
methods:{
tap:function(i,k){
(i,k);
},
test:function(i){
(i);
}
}
})
if( < 768){
('body')[0]. = 0;
}
</script>
</body>
</html>
github：/weijhfly/vue-tap
Refer to other vue-tap plug-ins, but there are still areas that need to be improved and will be updated in the future. In addition, it is recommended to solve the problem of click delay on the mobile terminal, which has better compatibility and is convenient to use. However, relatively speaking, the simulated tap event is small in size, so you can also practice it.
Summarize
The above is the implementation of vue custom tap instructions and tap events introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!