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;
      });
    },