vue按钮防抖

问题

一般来说前端都需要做按钮防抖避免一个时间被重复触发，首先可能会出现bug，消耗服务器性能，用户体验也不是很好。

解决方法

main.js文件自定义指令

Vue.directive("preventReClick", {
  inserted(el, binding) {
    el.addEventListener("click", () => {
      if (!el.disabled) {
        el.disabled = true;
        setTimeout(() => {
          el.disabled = false;
        }, binding.value || 3000);
      }
    });
  }
});

在需要使用的按钮上加上 v-preventReClick

 <el-button  size="small" type="primary" v-preventReClick @click="onSubmit">{{ $t("button.confirm") }}
          </el-button>