携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

进度条的样式我们基本很少手写，都是通过UI组件库的方式或者网上一些别人写好的拿过来借鉴一下，但是进度条是基本都是产品设计好的，如果网上并没有大致相同的，UI组件库的进度条样式和产品图也不一样，我们也无权修改效果图的情况下，只能手写，我们今天来实现一下好看的横向进度条

效果图

这里其实是没有按钮的，只不过是为了让我们能够清晰的看到进度条的变化所加上的

企业微信截图_1661086240848.png

页面结构

外面有一个大盒子，大盒子中包含了一个百分比显示的盒子，一个进度条的盒子，进度条盒子中包含了一个无序列表，无序列表主要用于进度条的填充实现，里面有五个子元素，分别代表着0%，25%，50%,75%,100%，这四个进度，我们在给上样式，如果进度超过了元素设置的界定值，则会被点亮，否则就是未点亮状态，最后加上两个按钮，这两个按钮绑定了两个方法，方法作用于操作进度条的增减

<div id="home">
    <div>{{courseCompletionRate}}%</div>
   <!-- 进度条 -->
    <div class="study_progress">
      <!-- 填充 -->
      <ul :style="{width:`${courseCompletionRate}%`}">
        <li :class="{study_progress_active:courseCompletionRate>0}"></li>
        <li :class="{study_progress_active:courseCompletionRate>25}"></li>
        <li :class="{study_progress_active:courseCompletionRate>50}"></li>
        <li :class="{study_progress_active:courseCompletionRate>75}"></li>
        <li :class="{study_progress_active:courseCompletionRate>=100}"></li>
      </ul>
    </div>
    <div class="set">
    <button @click="add"> 增加进度</button>
    <button @click="reduce">减少进度</button>

    </div>

逻辑实现

我们定义了一个属性，属性是进度条的进度，默认进度是0,在定义两个方法，一个是增加进度条进度，一个是减少进度条进度，我们在方法中使用逻辑符中断的特性给进度条增减加上判断条件，增加判断条件的原因是保证进度条的值不大于小于界定值，我们的界定值最小为0最大为100

export default {
  data() {
    return {
    //进度条进度
    courseCompletionRate:0
    };
  },
  methods: {
  //增加进度条进度
 add(){
 //判断当前进度是否小于100，如果小于100则进行增加进度
this.courseCompletionRate<100&&this.courseCompletionRate++
 },
 //减少进度条进度
 reduce(){
 //判断当前进度是否大于0，如果大于0则可以进行减少进度
this.courseCompletionRate>0&&this.courseCompletionRate--
 }
  },
};

代码我放到码上掘金上了，有兴趣的可以看一下！这里代码需要放到本地Vue项目中才可以运行

坚持努力，无惧未来！

Vue实现横向进度条

效果图

页面结构

逻辑实现