Vue防止按钮重复点击的全局指令

1,515 阅读1分钟
Vue.directive("resetButton", {
  inserted(el, binding) {
    el.addEventListener("click", () => {
      if (!(el as any).disabled) {
        (el as any).disabled = true;
        (el as any).style.cursor = "not-allowed";
        setTimeout(() => {
          (el as any).disabled = false;
          (el as any).style.cursor = "pointer";
        }, binding.value || 1000);
      }
    });
  },
});
  • 还可以自定义按钮点击的间隔时间,比如间隔时间为2秒。如下
<el-button v-resetButton="2000" @click="confirmClick">确 定</el-button>