简介

基于Element-plus，throttle-box节流盒子。

使用之前，请先安装Element-plus，基于vLoading。

功能

1.针对重点按钮（新增、修改、删除、导出、审核等）进行节流盒子控制；

2.解决快速点击，发起多次请求的问题；

3.解决请求响应慢，再次点击发起相同请求的问题。

4.前端处理防君子不防小人，后端需同步处理，加强数据正确性。

快速开始

npm i throttle-box -S

快速应用

全局注入

import ButtonThrottle from 'throttle-box'
app.use(ButtonThrottle);

局部注入

import { ButtonThrottle } from 'throttle-box';
export default {
  name: 'App',
  components: {
    ButtonThrottle
  }
}

主参数

参数 | 类型 | 必填项 | 默认值 | 参考值 | 说明 ---- | ----- | ------ | ------ | ------ | :------ v-model | Boolean | √ | | | 节流阀开启状态。 svg | String | × | | | Loading组件 element-loading-svg。

示例

常规

<ButtonThrottle v-model="form.butLoading">
  <button @click="submitForm">确 定</button>
</ButtonThrottle>

export default {
  data() {
    return {
      form: {
        // 校验
        rules: {},
        // 数据
        data: {},
        // 按钮加载
        butLoading: false,
      },
    };
  },
  methods: {
    submitForm() {
      console.log('进入请求');
      this.form.butLoading = true;
      setTimeout(() => {
        console.log('请求结束');
        this.form.butLoading = false;
      }, 5000)
    },
  }
};