vue限制保存按钮重复点击，防止多次点击保存重复提交

1.在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)
     	}
   	})
	 }
});

2.页面引用，添加新属性v-preventReClick。该方法只对el-button生效。

<el-button type="primary" @click="clickSave" v-preventReClick>保存</el-button>

还有一个针对div生效的节流方法

1.创建utils工具，reduceExpenditure.js，写入以下代码：

// vue
import Vue from 'vue'
// create directive
const preventReClick = Vue.directive('preventReClick', {
    
    
  inserted: function (el, binding) {
    
    
    el.addEventListener('click', () => {
    
    
      // 判断按钮是否可点击
      if (!el.disabled) {
    
    
        el.disabled = true
        setTimeout(() => {
    
    
          el.disabled = false
        }, binding.value || 3000)//默认3秒节流时间
      }
    })
  }
})

// export
export {
    
     preventReClick }

2.main.js 中全局注册

import {
    
     reduceExpenditure } from "./utils/reduceExpenditure";
Vue.prototype.$reduceExpenditure = reduceExpenditure;// 全局注册节流

3.页面引用

//节流3秒
<el-button type="primary" @click="clickSave" v-preventReClick>保存</el-button>
//节流1秒
<el-button type="primary" @click="clickSave" v-preventReClick='1000'>保存</el-button>