按钮防抖

1. 自定义指令

    // 在directive.js文件
    import Vue from 'vue'
    /*
      按钮防抖动指令
    */
    Vue.directive('debounce', {
      inserted(el, binding) {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true
            setTimeout(() => {
              el.disabled = false
            }, binding.value || 3 * 1000)
          }
        })
      }
    })
   

    // main.js中引入
    import '@/utils/directive.js'
   

    // 页面中使用
    <el-button v-debounce>防抖</el-button>
   

2. 按钮单独使用loading或者disabled实现

🌟 方案分析：

1. 自定义指令相对来讲，代码改动量稍小，但是防抖时间不精准，有可能接口还没响应按钮就可以再次点击了。如：防抖时间为1秒，但是请求花掉了2秒才返回数据给前端进行处理，中间产生了时间差，导致用户有时间重复点击。
2. 单独按钮实现，代码改动量稍大，防重复提交时间更精准