Vue中防止按鈕重復點擊提交的方法

經常會遇到的一個問題(如圖所示)，在短時間內點擊按鈕多次，會造成重復提交，出現多條數據，以下講一下我的解決辦法，比較類似，但是用起來能有效阻止提交多次。

一、自定義全局指令

• 使用Vue.directive()來自定義全局注冊指令，在main.js中加入下方這段代碼，可以全局應用

	// 防止el-button重復點擊
	Vue.directive('preventReClick', {
 	 inserted(el, binding) {
    	el.addEventListener('click', () => {
      	if (!el.disabled) {
       	 el.disabled = true
       	 setTimeout(() => {
         	 el.disabled = false
        	}, binding.value || 2000)
      	}
    	})
 	 }
	});

• 接着在el-button中添加v-preventReClick，就可實現效果，在點擊之后按鈕變為禁用狀態，持續禁用兩秒,兩秒之后便可再一次提交

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

二、自定義局部指令

• 在export default {} 中寫入下面這段代碼，進行局部注冊指令

	// 防止el-button重復點擊
	directives: {
 	 preventReClick: {
   	 // 指令的定義
    	inserted(el, binding) {
     	 el.addEventListener('click', () => {
      	  if (!el.disabled) {
       	   el.disabled = true
       	   setTimeout(() => {
       	     el.disabled = false
       	   }, binding.value || 2000)
      	  }
     	 })
   	 	}
  	  }
	},

• 接着也是在el-button中添加v-preventReClick，就可實現效果

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

三、動態控制disabled屬性

• 在el-button中添加disabled屬性，進行動態控制

   // 添加屬性
   <el-button type="primary" @click="handleSave" :disabled="disabled">保存</el-button>

• 在需要調用的事件中，控制按鈕啟用禁用，實現的效果是在點擊按鈕后禁用兩秒，兩秒之后，按鈕恢復啟用狀態

    // 調用事件動態控制disabled屬性
    handleSave() {
      this.disabled = true;
      let params = {
        data: this.data,
      };
      this.$requestFn("POST", this.$url.export.test, params)
      .then((res) => {
        this.$toast.success("保存成功");
      })
      .finally(() => {
        setTimeout(() => {
	    	this.disabled = false;
        }, 2000)
      });
    },

以上是三種不同的方法，都能實現防止按鈕重復點擊導致提交多次的問題。