手摸手教你封装一个进度条组件

我正在参加「掘金·启航计划」

一、需求

近期要开发个小应用，本来项目选择了vant框架，已经自带进度条组件。奈何ui设计脑洞大开，设计出来了这样的进度条，发现满足不了，那就只能动手造啦！话不多说，马上开搞。

二、分析

目前根据我的这个需求来看的话，这个进度条只有一个展示的作用，但是并不是仅限于单独百分比，有可能是分数，例如总分是5分，达到了3分。这么想一想目前就大概出了3个属性：

• total （总值，默认100）
• curr （当前值，默认0）
• unit （进度条的单位，默认%）

三、盒子模型

看起来样式，也比较简单，右边红色的为总值+单位。蓝色框是进度条的一个外部框框，绿色箭头所指为进度条的填充，灰色箭头所指是当前进度值，做一个定位即可，下面废话少说直接上代码。

四、开淦

就简单把代码给大家参考一下了，当前进度值展示那块，按理说应该做一个判断，如果进度条的值不足以展示文字时，进行到外侧展示，就当给大家留个小练习吧。

<template>
  <div class="box flex flex-ali-cen">
    <div class="progress">
      <div class="progress-curr" :style="{width: `${pre}%`}">
        当前{{curr}}{{unit}}
      </div>
    </div>
    <p class="total">{{total}}{{unit}}</p>
  </div>
</template>
<script>
  export default {
    props: {
      curr: {
        type: Number,
        default: 10
      },
      unit: {
        type: String,
        default: '%'
      },
      total: {
        type: Number,
        default: 100
      }
    },
    computed: {
      pre() {
        return this.curr / this.total * 100;
      }
    }
  }
</script>
<style lang="scss">
  .box {
    width: 100%;
    height: 22px;
    display: flex;
    align-items: center;
    .progress {
      flex:1;
      height: 22px;
      background: #FCFCFC;
      border: 1px solid #D8D7D7;
      box-shadow: 3px 2px 0px 0px rgba(224,223,223,0.11);
      border-radius: 20px;
      overflow: hidden;
      .progress-curr {
        text-align: center;
        font-size: 18px;
        color: #fff;
        height: 100%;
        border-radius: 16px;
        background: linear-gradient(0deg, #B4DD66, #BAF166, #B5DB68);
      }
    }
    .total {
      font-size: 18px;
      color: var(--font-color03);
    }
  }
</style>

五、效果

<Progress :curr="3" unit="分" :total="5"></Progress>

<Progress :curr="70"></Progress>

好啦好啦，这样一个基础的进度条组件就被封装好啦。