vue与elementUI进度条组件并控制进度条加载速度（文件下载为例）

vue与elementUI进度条组件并控制进度条加载速度（文件下载为例）

这里采用的“假进度条”，触发下载时先让他平稳加载，最后加载完成直接百分之百。

转载文章：vue中进度条写法_在vue中如何实现页面加载进度条组件_黄海柳的博客-CSDN博客

感谢原作者，非常详细！！！！！！！！！！！

采用progress进度条组件，详见elementUI官网

完整代码如下：

点击确定下载按钮，会显示进度条，并且每隔500ms加载5%。

<div v-show="progressFlag">
    <el-row><span>导出进度：</span></el-row>
    <el-row>
        <el-progress :text-inside="true" 
                     :stroke-width="17"                                                          :percentage="progressPercent">
        </el-progress>
    </el-row>
</div>
<el-button @click="downLoad" size="small" type="primary">确定下载</el-button>

progress属性解释：（status未写，使用默认值）

参数	说明	类型	可选值	默认值
percentage	百分比（必填）	number	0-100	0
status	进度条当前状态	string	success/exception/warning	primary
stroke-width	进度条的宽度，单位 px	number	—	6
text-inside	进度条显示文字内置在进度条内（只在 type=line 时可用）	boolean	—	false

data(){
return{
    progressFlag:flase,//进度条是否显示，初始隐藏
    progressPercent:0//进度条进度显示的初始值
}
},
props: {
    //自增幅度
    step: {
        type: Number,
        default: 5,
    },
    //初始值
    initVal: {
        type: Number,
        default: 0,
    },
    //到一定进度停止
    stopVal: {
        type: Number,
        default: 90,
    },
    //进度条继续到成功
    isOk: {
        type: Boolean,
        default: false,
    },
},
watch: {
    //监听组件props变化决定是否继续加载
    isOk() {
        let progressPercent = this.progressPercent
        let step = this.step
        let timer = setInterval(() => {
            progressPercent = progressPercent + step
            // 加载到百分百完成
            if (progressPercent >= 100) {
                // 关闭定时器
                clearInterval(timer)
                // 加载完成关闭进度条
                this.progressFlag = false
                return
            }
        }, 500)
    },
},
methods:{
    downLoad(){
        //显示进度条
        this.progressFlag = true
        // 初始化后加载进度，加载到百分之多少由stopVal决定
        this.progressPercent = this.initVal
        let step = this.step
        //每500ms执行一次函数（进度条加step=5%）
        let timer = setInterval(() => {
            this.progressPercent = this.progressPercent + step
            // 父组件数据加载完前进度条最多到stopVal的这个百分值
            if (this.progressPercent >= this.stopVal) {
                //停止执行
                clearInterval(timer)
                return
            }
        }, 500)
        //下面就调用接口，调用完成就this.progressPercent=100
        //这部分我写完会更新
    },
}

解释：

setInterval() 函数会每间隔一段时间（直接设置这个时间，如上：500ms）执行一次函数，使用 clearInterval() 来停止执行。

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

clearInterval() 方法的参数timer：

调用 setInterval() 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setInterval() 所设定的定时执行操作。