这是我参与「第五届青训营」笔记创作活动的第1天。由于之前忙于项目开发，没有及时进行笔记整理。目前项目开发告一段落，故开始整理一下在本次青训营中的收获。本次参加的是前端组件库项目，我在其中负责Progress进度条组件和Upload上传组件的开发，本篇笔记主要分享一下Progress的开发记录。

线形进度条

这是最基本的进度条样式。用于展示用户操作进度，比如下载文件的进度、上传文件的进度、视频播放的进度等等，告知用户当前的状态和预期，展示任务的进度。

在本次开发中，我首先是创建了一个新的 Vue 单文件组件progress.vue，刚开始定义的参数有颜色、百分比和图标,使用了一个容器和一个具有动态宽度的内部进度条，并将进度条的宽度绑定到组件的 percent 属性上。由于后面还要写其他的功能，故将这个模块用v-if封装。图标可以直接采用本项目中已经封装好的icon图标。如果进度条达到100%，则会在进度条末端显示“满”字。接着编写TS代码，定义组件的属性和状态。

<div class="line" v-else>
      <div class="colorLine" :style="'background:' + props.color + ';width:' + props.percent + '%'"></div>
    </div>
    <div class="status" v-if="status">
      <tass-icon name="warning" v-if="status=='warning'"></tass-icon>
      <tass-icon name="success" v-if="status=='success'"></tass-icon>
    </div>
    <div class="percent" v-else-if="percent==100">
      满
    </div>
    <div class="percent" v-else-if="props.type!='in'">
      {{ props.percent }}%
    </div>

百分比内显

完成最基础的线形进度条之后，我又参照element-ui组件库写了百分比内显功能。加了一个type参数用来选择是线形模式还是百分比内显模式。可以看出这两种模式只需要更改数字和进度条的位置即可。

<div class="tas-progress" v-if="props.select=='on'">
    <div class="line" v-if="props.type=='in'">
      <div class="colorLine" :style="'background:' + props.color + ';height:26px;text-align:right;line-height:26px;width:' + props.percent + '%'">
        {{ props.percent }}%
      </div>
    </div>

之后我们就可以在App.vue中使用组件了，如下所示：

<div style="width: 640px; padding: 20px 0">
    <tass-progress color="#67c23a" :percent="100" select="on"></tass-progress>
    <tass-progress color="#F0E68C" :percent="80" status="warning" select="on"></tass-progress>
    <tass-progress :percent="40" status="success" select="on"></tass-progress>
  </div>

  <div style="width: 640px; padding: 20px 0">
    <tass-progress color="#e6a23c" :percent="60" select="on" type="in"></tass-progress>
  </div>

在下一篇笔记中，我将介绍环形进度条的开发过程。