vue3 实现百分比进度条，文件上传进度条，包更新进度条

最新推荐文章于 2024-04-26 16:47:03 发布

H@Z*rTE|i

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量668

点赞数 11

分类专栏： vue3 css 进度条文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/IT13333/article/details/135850756

版权

vue3 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

进度条

1 篇文章 0 订阅

订阅专栏

包更新，文件上传，进度条

在这里插入图片描述

template 里面

<van-button @click="changerun">{{ run?'暂停':'播放' }}</van-button>{{ percentage }}%
        <div class="line" :style="{height:'2px', width:percentage+'%', backgroundColor:percentage==100?'#18C298FF':'#0A6AF0FF'}"></div>

const percentage = ref(0)
const run = ref(false)
let intervalId;

const changerun=()=>{
    
    if (!run.value) {
        animateProgress()
        run.value=true
    } else {
        clearInterval(intervalId);
        run.value=false
    }
}

const animateProgress = () => {
     intervalId = setInterval(() => {
        if (percentage.value==100) {
            clearInterval(intervalId);
            return;
        }
        console.log(111);
        percentage.value++;
    }, 50); // 每100毫秒更新一次进度条值
}