Detailed explanation of how to prevent users from clicking buttons frequently in vue

1. Encounter a problem in the project:

When the code execution in the event takes time and the user constantly clicks the button in a short time, the event that triggers the button multiple times in a short time (continuously initiates requests to the server)

2. Solution

Method 1: Define a variable (such as isLock) to control the disable attribute of the button, thereby preventing the user from clicking the button multiple times in a short time.

Method 2: Define a command globally, and control the time between clicks by binding the command on the button.

Method 3: You can only click once.

3. Specific implementation:

Method 1 Step:

① First set the variable isLock attribute value to false so that the button can be clicked (disable: true)

② When the user clicks, set the button immediately to be unclickable (disable: false)

③ After waiting for the event to be executed or the corresponding interval, the restore button is clickable.

<el-button @click="clickBtn" :disable="isLock">Button</el-button>
export default{
	data(){
		return {
			isLock: false, // The disable property of the control button		}
	},
	methods: {
		clickBtn(){
		 	// The setting button is not clickable (disable: false)			 = true
			// Execute time-consuming code or event request, etc....			
			// After waiting for the event to be executed or the corresponding interval, the restore button is clickable			setTimeout(() => {
				 = false
			}, 2000)
		}
	}
}

Method 2:

① First create a command file (such as: file)

② Create a global directive in the file (such as preventReClick)

③ Set the state of the bound button according to the disable state value of the button element in the command (such as changing the background color and border color of the button)

④ Then introduce instructions in the entry file file

⑤ Bind the specified button that needs to be prohibited from repeated clicks

====== In the file ====
import Vue from 'vue'
const preventReClick = ('preventReClick',{
	inserted: function(el, binding, vNode, oldVnode){
		('click', () => {
			if(!){
			     = true
			     = '#ccc'
			     = 'none'
       			setTimeout(() => {
          			 = false
          			  = '#1890ff'	
          			  = '1px solid #1890ff'
        		}, 2000)
			}
		})
	}
})

export default {
	preventReClick 
}

====== 在In the file引入指令 =====
import {preventReClick } from './directive/'
(preventReClick )

Then add v-preventReClick to the el-button to achieve the effect. After clicking, the button becomes disabled and is disabled for two seconds. After two seconds, you can submit it again.

	// Add new attributes	<el-button type="primary" @click="handleSave" v-preventReClick>save</el-button>

Method 3:

： = 'orderEvaluste()'

a tag cannot be clicked repeatedly

Define a click event, and then click it and unbind it, and you can only click once.

<a href="js" rel="external nofollow"  id="" onClick="buttonSubmit()">Button</a>
<script>
	function buttonSumbit(){
		('buttonId').onclick = null//Unbinding onclick event		alert('What to execute next')
}
</script>

Summarize

This is the article about how to prevent users from clicking buttons frequently in vue. This is the end of this article. For more related vue to prevent users from clicking content frequently, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!