给el-button加上防抖

vue项目中给el-button加上防抖

在项目开发中，相必大家时常会遇到按钮重复点击后引起事件重复提交的问题，在业余时间，我总结了几种方法，在此简述一下

1. 利用按钮的 loading 属性，防止用户重复点击
2. 直接把loading放在http请求去做，统一封装方法
3. 给按钮加上防抖，点击一次需要间隔一段时间才能触发二次点击

我们写一下第三种解决方法，在这里我们使用vue全局指令来实现，选取了一种简单的指令方式

大概思路 ： 当第一次点击按钮时，设置它的 disabled 属性，超过防抖时间后释放属性

在项目的 main.js 文件下，编写全局指令

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秒
    })
  }
})

使用

<el-button v-debounce>测试</el-button>

有何指点，欢迎提出建议！