vue给页面添加‘加载中’------ loading

最新推荐文章于 2024-10-09 18:14:54 发布

只差亿点点

最新推荐文章于 2024-10-09 18:14:54 发布

阅读量1.6k

点赞数 10

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_67898309/article/details/135774389

版权

本文介绍了在Vue应用中如何使用loading指示器处理页面加载以及异步API请求的示例，包括handleAppove方法中的modalloading和handleSubmit中的自定义loading配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面效果：

实现代码：

handleAppove() {
      this.$modal.loading("正在审批，请稍候...");//开启加载中
 
      this.$refs['approvForm'].validate((valid) => {
        if (valid) {
          approveBatchNo(this.approvForm).then((res) => {//请求接口
            if (res.code == 200) {
              if(res.data.failNum!=0){
              this.$modal.msgError(`审批失败${res.data.failNum}条数据`)
              }
              if(res.data.sucNum!=0){
              this.$modal.msgSuccess(`审批成功${res.data.sucNum}条数据`)
              }
              this.approvDialog = false
              this.getList()
 
              this.$modal.closeLoading()  //响应成功关闭加载中
            }else{
 
              this.$modal.closeLoading()  //响应失败关闭加载中
            }
          })
        }
      })
    },

如果要改变加载中字体与背景可以这样写：

    handleSubmit() {
          let loading = this.$loading({
            lock: true,                    //lock的修改符--默认是false
            text: "加载中，请稍候...",      //加载提示文字
            background: "rgba(0,0,0,0.8)", //遮罩层颜色
            spinner: "el-icon-loading",    //自定义加载图标类名
          });
 
          const data = this.arr;
          getList(data).then((response) => {
            if (response.code == 200) {
              loading.close();             //响应成功关闭加载
              this.$message({
                message: "提交成功",
                type: "success",
              });
              this.cancel();
            }
          });
        }