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

#4 el-progress参数介绍

#5如果对你有帮助，请点赞关注+收藏哦