Vue给按钮加上防抖

防抖：就是按钮重复点击后引起事件重复提交的问题
解决办法就是在main.js里面加入以下代码：

//按钮防抖事件：当第一次点击按钮时，设置它的 disabled 属性，超过防抖时间后释放属性
Vue.directive('debounce', {
  inserted(el, binding) {
    el.addEventListener('click', e => {
      el.classList.add('is-disabled')
      el.disabled = true
      setTimeout(() => {
        el.disabled = false
        el.classList.remove('is-disabled')
      }, 2000)//我这里设置的是2000毫秒也就是2秒
    })
  }
})

用法如下：

//加入v-debounce指令就行
<el-button v-debounce>测试</el-button>