vue2中进度条上加高亮圆点

在Vue2中添加进度条上的高亮圆点，可以通过使用CSS和JavaScript来实现。基本思路是在进度条容器内部创建一个圆点元素，并通过JavaScript动态控制该圆点的位置，使其随进度条的进度移动。以下是实现这个功能的基本步骤：

1. 创建进度条和圆点的HTML结构。
2. 使用CSS设置进度条和圆点的样式，确保圆点的位置能够反映进度。
3. 使用JavaScript或者Vue的指令（如v-for, v-bind, v-on等）来动态更新圆点的位置。

这里是一个简化的例子：

HTML部分：

<div id="progress-container">
    <div class="progress-bar">
        <div class="progress-dot" :style="{ left: progress + '%' }"></div>
    </div>
</div>

CSS部分：

#progress-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    width: 0;
    height: 20px;
    background-color: #3f51b5;
    border-radius: 4px;
}

.progress-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #3f51b5;
    position: absolute;
    top: -1px;
    transform: translateY(-50%);
    transition: left 0.2s ease-out;
}

JavaScript/Vue部分：

new Vue({
    el: '#app',
    data: {
        progress: 0 // 初始进度
    },
    methods: {
        // 假设这是一个更新进度的方法
        updateProgress(newProgress) {
            this.progress = newProgress;
        }
    },
    // 使用定时器模拟进度更新
    mounted() {
        setInterval(() => {
            let newProgress = this.progress + 10;
            if (newProgress > 100) newProgress = 100;
            this.updateProgress(newProgress);
        }, 2000);
    }
});

在这个例子中，我们创建了一个进度条和一个圆点，并使用Vue的数据绑定来动态更新圆点的位置。通过CSS样式设置了进度条和圆点的基本外观，并利用`left`属性来控制圆点的位置。JavaScript部分则使用了Vue实例的方法来模拟进度更新。