Vue使用vue-ellipse-progress绑定进度值与步骤文本激活状态问询

实现方案 #

1. 模板部分修改 #

修改原template里的进度条和文本列表部分，绑定动态进度和激活状态：

<template>
    <div>
        
        <section class="AboutSection d-flex flex-column justify-content-center align-items-start text-center pt-5">

            <div>
                <router-link to="/eighthPage" class="BackBtn"> <img src="https://img.icons8.com/ios-glyphs/30/000000/back.png"/></router-link>
                <router-view></router-view>
            </div>

            <div class="container-fluid logoHeader">
                <h1>Vue-VPN</h1>
            </div>

            <div class="AboutText container-fluid ">

                <div class="row justify-content-center align-items-center text-center ">
                    <div class="col-md-10">
                        <h2 class="fw-bolder my-5">Thanks! Your plan is being prepared</h2>
                        <p class="py-3" style="color: #1488CC;">Please wait a moment...</p>

                    </div>

                    <div class="col-md-5 d-flex flex-column justify-content-center align-items-center text-center">
                        
<!-- PROGRESS CIRCLE -->
                        <ve-progress class="progressCircle position-relative" :progress="currentProgress" />
<!-- END PROGRESS CIRCLE -->

<!-- TEXT SECTION-->
                        <ul class="p-0 m-0 mt-3">
                            <li class="my-3 d-flex justify-content-start progressText" :class="{active: currentProgress >= 20}">
                                <i class="fas fa-check me-2 pt-1" style="color: limegreen;"></i>
                                <p>Your answers are being analyzed. </p>    
                            </li>

                            <li class="my-3 d-flex justify-content-start progressText" :class="{active: currentProgress >= 40}">
                                <i class="fas fa-check me-2 pt-1" style="color: limegreen;"></i>
                                <p>Account setup in progress. </p>
                            </li>

                            <li class="my-3 d-flex justify-content-start progressText" :class="{active: currentProgress >= 60}">
                                <i class="fas fa-check me-2 pt-1" style="color: limegreen;"></i>
                                <p>Server location setup is in progress. </p>
                            </li>

                            <li class="my-3 d-flex justify-content-start progressText" :class="{active: currentProgress >= 80}">
                                <i class="fas fa-check me-2 pt-1" style="color: limegreen;"></i>
                                <p>Your account is being created. </p>
                            </li>
                        </ul>
<!-- END TEXT SECTION-->

                    </div>

                    <h1>IN PROGRESS</h1>
                </div>

            </div>
        </section>
    </div>
</template>

2. 脚本部分修改 #

<script>
    export default {
        data() {
            return {
                currentProgress: 0,
                progressTimer: null,
                showPopup: false
            }
        },
        mounted() {
            this.startProgress()
        },
        methods:{
            startProgress() {
                // 每50ms进度+1，可根据需要调整速度
                this.progressTimer = setInterval(() => {
                    this.currentProgress += 1
                    // 进度到75时暂停，触发弹窗
                    if (this.currentProgress >= 75) {
                        clearInterval(this.progressTimer)
                        this.showPopup = true
                        // 此处插入你自己的弹窗逻辑即可
                    }
                }, 50)
            },
            // 弹窗关闭后调用此方法继续走进度
            resumeProgress() {
                this.showPopup = false
                this.progressTimer = setInterval(() => {
                    this.currentProgress += 1
                    // 进度到100时清除定时器
                    if (this.currentProgress >= 100) {
                        clearInterval(this.progressTimer)
                    }
                }, 50)
            }
        },
        beforeDestroy() {
            // 组件销毁时清除定时器，避免内存泄漏
            if (this.progressTimer) {
                clearInterval(this.progressTimer)
            }
        }
    }
</script>

3. 样式部分修改 #

在原style基础上新增激活状态的样式：

<style scoped>
.progressCircle{
    font-size: 1.5rem;
}
.progressCircle::before{
    content: '%';
    position: absolute;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
}
.progressText{
    opacity: .4;
    color: #111;
}
/* 新增激活状态样式 */
.progressText.active {
    opacity: 1;
}
</style>

逻辑说明 #

• 进度值用响应式变量currentProgress存储，和圆形进度条组件绑定，自动同步进度显示
• 每个文本项通过动态类绑定对应阈值，进度达到阈值自动激活，透明度变为1
• 进度增长通过定时器控制，到达75%自动清除定时器暂停进度，同时触发弹窗
• 弹窗关闭后调用resumeProgress方法，重新启动定时器从75%继续增长到100%

内容的提问来源于stack exchange，提问作者Kerem Unce