vue command prevents buttons from being connected
During development, I often encounter situations where customers feedback a data submitted on both sides. This situation cannot be restricted. The usual processing method of the user is processed in the function generated by the button. However, such repetitive work makes me feel uncomfortable, so I try to solve it by using the vue instruction.
I have looked up many tutorials and changed the disabled attribute to solve it, but this is not the effect I want, so after some other references and my own ideas, I have found this way.
When using instructions, we need to know some basic knowledge of instructions (Air ticket transfer vue official website）
Hook function
-
bind: Called only once, and the instruction is called the first time it is bound to an element. Here you can perform one-time initialization settings. -
inserted: Called when the bound element is inserted into the parent node (only the parent node exists, but it may not be inserted into the document). -
update: Called when the VNode of the component is updated, but may occur before its child VNode is updated. The value of the instruction may have changed or not. But you can ignore unnecessary template updates by comparing the values before and after the update -
componentUpdated: Called after the VNode and its child VNode of the component where the directive is located. -
unbind: Called only once, and is called when the instruction is unbined from the element.
Hook function parameters
-
el: The element bound to the instruction can be used to directly operate the DOM. -
binding: An object containing the following property:-
name: Directive name, excluding v- prefix. -
value: The binding value of the directive, for example: v-my-directive="1 + 1", the binding value is 2. -
oldValue: The previous value bound by the directive, available only in the update and componentUpdated hooks. Available regardless of whether the value changes or not. -
expression: Instruction expression in the form of a string. For example, in v-my-directive="1 + 1", the expression is "1 + 1". -
arg: Parameters passed to the instruction, optional. For example, in v-my-directive:foo, the parameter is "foo". -
modifiers: An object containing modifiers. For example: In , the modifier object is { foo: true, bar: true }.
-
-
vnode: Vue compiles the generated virtual node. Move the VNode API to learn more. -
oldVnode: Previous virtual node, available only in update and componentUpdated hooks.
accomplish
Use in the page
<template>
<div>
<el-button v-preventDbClick:continuous="j">Test connection</el-button>
<!--v-preventDbClick:continuous="j" This method is written to achieve method transmission parameters The following will be combinedjsexplain-->
<div>
<h1>{{i}}</h1>
</div>
</div>
</template><script>
export default {
data(){
return{
i: '6',
j: '56'
}
},
methods:{
continuous(value){
= value
},
},
}
</script>
Under the file
('preventDbClick',{
bind(el, binding, vnode){
let timer
('click',() =>{
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
let _this =
// The value is v-preventDbClick:continuous continuous The continuous at this time is static // Official website instance v-mydirective:[argument]="value" argument parameter can be updated based on component instance data // It is the required parameter _this[]()
}, 300)
})
}
})Quoted in
import directives from './directives' (directives)
This method is not perfect and some cases do not apply (such as passing multiple parameters). I hope this method can give you new ideas.
vue anti-connection point, click repeatedly
Prevent repeated clicks, repeated submissions or repeated jumps to pages
Custom commands to control whether you can click repeatedly by binding the status on the label prototype.
Local registration
export default {
name: "",
directives: {
preventRepeat: {
inserted(el, binding) {
function __avoidRepeatHandler__() {
if (el.__clickDisabled__) return;
el.__clickDisabled__ = true;
el.__originalPointerEvents__ = ;
= "none";
setTimeout(() => {
el.__clickDisabled__ = false;
= el.__originalPointerEvents__;
}, || 1000);
}
("click", __avoidRepeatHandler__);
el.__avoidRepeatHandler__ = __avoidRepeatHandler__;
},
unbind(el) {
("click", el.__avoidRepeatHandler__);
delete el.__clickDisabled__;
delete el.__originalPointerEvents__;
},
},
},
}Use this command v-preventRepeat or v-prevent-repeat where you need to visit the click submission.
<div @click="pointPraise" v-preventRepeat>submit</div>
Global registration
New
export default {
install(Vue) {
// Anti-repeated clicks (instruction implementation) ('preventRepeat', {
inserted(el, binding) {
function __avoidRepeatHandler__() {
if (el.__clickDisabled__) return;
el.__clickDisabled__ = true;
el.__originalPointerEvents__ = ;
= "none";
setTimeout(() => {
el.__clickDisabled__ = false;
= el.__originalPointerEvents__;
}, || 1000);
}
("click", __avoidRepeatHandler__);
el.__avoidRepeatHandler__ = __avoidRepeatHandler__;
},
unbind(el) {
("click", el.__avoidRepeatHandler__);
delete el.__clickDisabled__;
delete el.__originalPointerEvents__;
},
})
}
}Introduce and use globally
import directives from '@/utils/' (directives)
Use this command v-preventRepeat where you need to visit the click submission
<div @click="pointPraise" v-preventRepeat>submit</div>
You can pass parameters to a specified time
<div v-preventRepeat="800" @click="onClick">
The above is personal experience. I hope you can give you a reference and I hope you can support me more.