Vue 防止用户在短时间内频繁多次点击按钮

在实际开发过程中一定要时刻考虑组件化、工具化，比如防止用户在短时间内频繁多次点击按钮就可以进行工具化
在我的项目目录下有tools文件夹，在该文件夹下创建preventReClick.js文件

export default {
  install (Vue) {
    // 防止重复点击
    Vue.directive('preventReClick', {
      inserted (el, binding) {
         console.log("binding-7",binding)
         el.addEventListener('click', () => {
           if (!el.disabled) {
             el.disabled = true
             setTimeout(() => {
               el.disabled = false
             },binding.value || 5000)
           }
         })
       }
     })
  }
}

在main.js注册该全局属性

//防止用户在一定时间内重复频繁的触发事件
import preventReClick from '@/utils/preventReClick.js';
Vue.use(preventReClick);

最后在我们需要防止用户短时间内重复频繁的触发事件的按钮上添加v-preventReClick属性即可

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