0.0.5 • Published 6 months ago
throttle-box v0.0.5
简介
基于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)
},
}
};