防抖按钮

自定义指令

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

request

全局配置

Object.assign(Vue.prototype, {
  $request: request,// 请求
})

实例调用

this.$request({})

当前问题

$request与request重复引用

接口没有统一管理

缺点: 不得于维护，例如接口的路径修改或废弃，得修改多处