关于前端:公共工具

防抖按钮

自定义指令

//debounce.js

import Vue from "vue";

Vue.directive("debounce", {inserted(el, binding) {el.addEventListener("click", () => {el.classList.add("is-disabled");
      el.disabled = true;
      setTimeout(() => {
        el.disabled = false;
        el.classList.remove("is-disabled");
      }, binding.value || 300); // 我这里设置的是 2000 毫秒也就是 2 秒
    });
  },
});

主入口配置

//main.js

import "./directive/debounce.js";

实例调用

<button v-debounce @click="test">test</button>  // 默认
<button v-debounce="3000" @click="test">test</button> // 自定义工夫
<el-button v-debounce @click="test">test</el-button> //elemntui

申请 loading 蒙层