VUE 自定义指令实现点击后禁用elementUI按钮

一、背景

要求点击完按钮后对按钮进行禁用，并在几秒后启用按钮点击

二、实现思路

对比各种实现代码量和使用便捷程度，选择封装公共指令，可以给按钮快捷添加这个功能

三、步骤

1、根据vue 文档定义一个空指令。

Vue.directive("preventClick", {
    inserted(el, binding, vnode) {
      }
})

2、按钮添加点击事件，点击后禁用按钮

Vue.directive("preventClick", {
  inserted(el, binding, vnode) {
      el.addEventListener('click', () => {
        if (!el.disabled) {
          el.disabled = true //禁用
          el.classList.add(`is-disabled`);
        }
      })
  }
})

3、根据传值时间恢复点击

Vue.directive("preventClick", {
  inserted(el, binding, vnode) {
      const { value } = binding;
      if (value === false) {
        return;
      }
      el.addEventListener('click', () => {
        if (!el.disabled) {
          const defalutTime = (value || 5) - 0; //缺省默认禁用时间
          el.disabled = true //禁用
          el.classList.add(`is-disabled`);
          setTimeout(() => { //恢复按钮状态
            el.classList.remove(`is-disabled`);
            el.disabled = false
          }, defalutTime * 1000)
        }
      })
  }
})

4、优化按钮增加剩余时间提示

Vue.directive("preventClick", {
  inserted(el, binding, vnode) {
      const { value } = binding;
      if (value === false) {
        return;
      }
      el.addEventListener('click', () => {
        if (!el.disabled) {
          const defalutTime = (value || 5) - 0; //缺省默认禁用时间
          el.disabled = true //禁用
          el.classList.add(`is-disabled`);
          let originalButton = el.innerHTML;
          let curTime = defalutTime;
          el.innerHTML = originalButton + `<span>(${curTime})</span>`;
          let timer = window.setInterval(() => { //更新时间状态
            curTime--;
            if (curTime == 0) {
              window.clearInterval(timer);
              timer = null;
            }
            el.innerHTML = originalButton + `<span>(${curTime})</span>`;
          }, 1000)
          setTimeout(() => { //恢复按钮状态
            el.classList.remove(`is-disabled`);
            el.disabled = false
            el.innerHTML = originalButton
          }, defalutTime * 1000)
        }
      })
  }
})

四、调用

<el-button  v-prevent-click="30">
    导出
</el-button>

五、总结

自定义指令写法代码量总体较少，而且使用方便，对原有逻辑入侵性较小