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

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

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

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

感谢原作者,非常详细!!!!!!!!!!!

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

完整代码如下:

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

导出进度:
确定下载

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() 所设定的定时执行操作。

你可能感兴趣的:(vue与elementUI,vue.js,elementui,javascript)