公共工具

防抖按钮

自定义指令

//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蒙层