vue中el-button防止重复点击

可以通过自定义全局指令的方式来实现。在main.js中加入 下面的指令，即可以全局使用。

// 防止el-button重复点击
Vue.directive('preventReClick', {
	inserted(el, binding) {
   	  el.addEventListener('click', () => {
     	if (!el.disabled) {
      	 el.disabled = true;
      	 el.style.cursur='not-allowed'
      	 setTimeout(() => {
        	 el.disabled = false
        	 el.style.cursor ='pointer'
       	}, binding.value || 2000)
     	}
   	})
	 }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

接着在el-button中添加v-preventReClick，就可实现效果，在点击之后按钮变为禁用状态，持续禁用两秒,两秒之后便可再一次提交。

// 添加新属性
<el-button type="primary" @click="handleSave" v-preventReClick>保存</el-button>

1
2
3