vue+element-ui实现进度条

最新推荐文章于 2024-08-20 08:00:00 发布

南工gjl

最新推荐文章于 2024-08-20 08:00:00 发布

阅读量1w

点赞数 11

分类专栏： vue+axios 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/F_fengzilin/article/details/116159570

版权

vue+axios 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue项目中利用Element-UI库创建动态进度条，包括标签的使用、数据绑定和网络请求中的进度更新。通过实例演示了如何设置text-inside、stroke-width和percentage属性，以及在axios请求中实时计算并更新进度。

摘要由CSDN通过智能技术生成

vue+element-ui实现进度条

#0先来看看效果图(后面的有点瑕疵忘了剪掉了)

在这里插入图片描述

1.创建el-progress标签：源码:

<el-progress 

     :text-inside="true" 
     :stroke-width="18" 
     :percentage="dlProgress" 
     status="success" 
     style="margin-top:10px"></el-progress>

在这里插入图片描述先在div中声明此标签，el-progress标签已经被封装好，只使用它的相关属性即可

#2.在data中声明用来控制进度条的变量.

源码:

    data() {
    return {  
      dlProgress:0,
     }
},

在这里插入图片描述

#3在发送网络请求的时候，调用onDownloadProgress函数

源码:

    let own=this;
    this.axios({
          //用axios发送get请求
        method: "post",
        url: "http://nyist-wr.com:8888/api/DownLoad/downloadRequest1?file="+file, // 请求地址 ，也可以传递参数
        responseType: "blob", // 表明返回服务器返回的数据类型
        //关键点，在axios发送网络请求，并且接收到后端返回的文件流时，换算成百分比，并赋值给data中声明的变量
        onDownloadProgress (progress) { 
         //progress可以改成其他的参数，不需要提前声明
        own.dlProgress=Math.round(progress.loaded / progress.total * 100);
        }

在这里插入图片描述