进度条的样式我们基本很少手写，都是通过UI组件库的方式或者网上一些别人写好的拿过来借鉴一下，但是进度条是基本都是产品设计好的，如果网上并没有大致相同的，UI组件库的进度条样式和产品图也不一样，我们也无权修改效果图的情况下，只能手写，我们今天来实现一下好看的横向进度条
效果图
这里其实是没有按钮的，只不过是为了让我们能够清晰的看到进度条的变化所加上的
页面结构
外面有一个大盒子，大盒子中包含了一个百分比显示的盒子，一个进度条的盒子，进度条盒子中包含了一个无序列表，无序列表主要用于进度条的填充实现，里面有五个子元素，分别代表着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项目中才可以运行
坚持努力，无惧未来！
