关于前端:公共工具

防抖按钮

自定义指令

//debounce.jsimport 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.jsimport "./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蒙层