VUE+ElementUI实现下载进度提示

近期做项目中，发现有些下载时间较长的文件，前端用户没有任何感知，为了改善用户体验，增加了下载进度提示。

注意，本文只是纯前端的实现。

1. 页面中增加标签

<el-dialog title="文件下载中" :visible.sync="downloadProgressShow">
  <el-progress type="circle" :percentage="filePercentage" color="red"></el-progress>
</el-dialog>

2. 在调用下载的方法前添加定时器，并设置标签展示

let culPer = window.setInterval(()=>{
    let per = this.filePercentage;
    console.log("当前下载进度："+per)
    if(per > 78){
        this.filePercentage = 99;
        return;
    }
    let addNum = this.getRandom(10,20);
    this.filePercentage = per+addNum;
},1000);

3. 生成随机数代码

getRandom(min, max) { //根据最小值和最大值产生一个随机数
  return Math.round(Math.random() * (max - min) + min);
}

4. 最后不要忘记将百分比重置为0, 并关闭进度提示。

window.clearInterval(culPer);//去掉定时器

5. 最终效果