vue给按钮加lodding

it2026-04-22  5

vue点击按钮等待加载时加lodding

在方法的最前面调用:

const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });

关闭: close方法:一定要接口返回数据就调用,把load关了,不管报没报错,都要关

loading.close();

如:

//修改订单状态 submitReceive(state, row) { const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); let params = { id: row.id, state: state, }; put("/sys/order/receive", params).then((res) => { loading.close(); if (res.code == 200) { if (state == 2) { this.$message({ type: "success", message: "接单成功!", duration: "500", }); } else if (state == 4) { this.$message({ type: "success", message: "送达成功!", duration: "500", }); } this.$emit("getOnTopGuide", "1"); this.getData(); } else { try { this.$message.error(res.data); } catch { this.$message.error(res.msg); } } }); },

lodding一定要写到校验后面 如果你loading开启了但是校验没通过,下面的代码就不执行了

//部分订单退款 toDrawbackPart() { if (!this.suo) { console.log("定时锁已生效~!"); return; } if (!this.textareaPart) { this.$message.error("处理原因不能为空!"); return; } const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); let prams = { id: this.toOrderRefundPartId, refundNum: this.num, refusedRefund: this.textareaPart }; this.suo = false; put("/sys/order/reject", prams).then(res => { loading.close(); if (res.code === 200) { this.reset2(); this.$message.success("退款成功"); this.refundPart = false; this.$refs.son.refundPartMethods(); } else { try { this.$message.error(res.data); } catch { this.$message.error(res.msg); } } this.suo = true; }); },
最新回复(0)