Vue settings cannot trigger click events repeatedly for a short period of time on buttons

Go straight to the code, brothers

① First create a directive file (such as: directive.js file)
② Create a global directive in the directive.js file (such as: preventReClick)
③ In the directive, set the bound button according to the disabled state value of the button element State (for example, change the background color and border color of the button)
④ Then introduce instructions in the entry file main.js file
⑤ Bind and specify on the button that needs to prohibit repeated clicks

import Vue from "vue";

const preventReClick = Vue.directive('preventReClick',{
	inserted: function(el, binding, vNode, oldVnode){
		el.addEventListener('click', () => {
			if(!el.disabled){
			    el.disabled = true
			    el.style.backgroundColor = '#ccc'
			    el.style.border = 'none'
       			setTimeout(() => {
          			el.disabled = false
          			 el.style.backgroundColor = '#1890ff'	
          			 el.style.border = '1px solid #1890ff'
        		}, 3000)
			}
		})
	}
})

export default preventReClick



// 在main.js文件中引入指令
import preventReClick from './directive/directive.js'
Vue.use(preventReClick )


// 按钮元素上绑定指定 
<el-button v-preventReClick >需要阻止重复点击的按钮元素11111</el-button>
<button v-preventReClick >需要阻止重复点击的按钮元素22222</button>

You can also do unified processing of axios request interception, or directly write a timer on the page, and choose according to the scene