element-ui button防重复点击指令

防止按钮重复点击指令

因为手快的同学，再进行按钮操作的时候，会触发多次，若这个点击事件接入API，就会重复请求API。所以为了防止这个问题，我不可能一个按钮去写一个防点击，这多麻烦。所以就写了个指令。下面上代码

export default {}.install = (Vue, options = {}) => {
  Vue.directive('dbClick', {
    inserted(el, binding) {
      el.addEventListener('click', e => {
        if (!el.disabled) {
          el.disabled = true
          el.style.cursor = 'not-allowed'
          setTimeout(() => {
            el.style.cursor = 'pointer'
            el.disabled = false
          }, 1500)
        }
      })
    }
  })
}

将这个文件引入到main.js之后就能全局用v-db-click的指令进行控制了，再也不用担心重复触发问题。