element-ui中loading的使用

最新推荐文章于 2024-06-03 16:39:14 发布

w宇宙王

最新推荐文章于 2024-06-03 16:39:14 发布

阅读量2k

点赞数

分类专栏： elementui 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_52244931/article/details/128816996

版权

elementui 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

当上传提交较大文件时，采用loading给予用户提示，如下图：请添加图片描述
主要代码：

    // 使用loading
          let loading = this.$loading({
            lock:true,
            text:'提交中，请稍等',
            background:'rgba(0,0,0,0.5)'
          })
    // 结束loading
    loading.close()

使用的位置部分代码：

  submitForm(formName) {
    var  formData = new FormData();
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          formData.append("file",this.ruleForm.paramsFile) //文件
          formData.append("versionName",this.ruleForm.versionName) //版本名称
          formData.append("versionCode",this.ruleForm.versionCode) //版本号
          formData.append("releaseDate",this.dateFormat(this.ruleForm.releaseDate)) //发布日期
          formData.append("description",this.ruleForm.description) //更新说明
          let loading = this.$loading({
            lock:true,
            text:'提交中，请稍等',
            background:'rgba(0,0,0,0.5)'
          })
          try{
          let res = await uploadApp(formData);
          if (res.code == 200) {
             loading.close()
            this.dialogFormVisible = false;
            this.$message({
              type: "success",
              message: "添加成功",
            });
             this.init();
             this.ruleForm.paramsFile = ""
             this.ruleForm.versionName = ""  //版本名称
             this.ruleForm.versionCode = ""  //版本号
             this.ruleForm.releaseDate = ""
             this.ruleForm.description = ""
             this.fileList = []
          }
          }catch{
            console.log("error");
              loading.close()
              this.$message.warning(`新增失败`);

          }
        } else {
          console.log("error sumbit");
          // return false
        }
      });
    },