制作一个进度条 | 青训营笔记

这是我参加第五届青训营伴学笔记创作活动的第6天。

进度条的形式有很多种。条形的进度条主要由两个椭圆容器和一个进度文本构成，下面主要分析条形进度条。

进度条展示及分析

要制作的进度条如下

进度条主要由4部分组成：

• 进度条整体容器

• 包裹进度条的容器

• 进度条容器的内层（显色层）和外层（背景色层）

• 进度展示文本

标签分析

这样就好分析了，只需要5个div标签，即可。

<template>
  <div class="progress">
    <!-- whole bar -->
    <div class="progress-bar">
      <!-- outside part -->
      <div class="progress-bar__inner">
        <!-- inside part -->
        <div class="progress-bar__outer">
        </div>
      </div>
    </div>
    <!-- text part with line-->
    <div class="progress-text">
      <span>70%</span>
    </div>
  </div>
</template>

最主要的是progress-bar，这是这个进度条主要的UI部分，通过占比控制inner在容器中的显色宽度，来直接体现这个进度条。

样式分析

为了能够在进度条和进度文本能在同一行显示，这里对progress类采用flex布局。如果想要固定进度条长度，并且进度条和文本能够两端对齐的话，主轴的对齐方向可以选择space-between，但是更建议文字固定大小，然后使用为进度条分配剩下的空间，这样更加灵活。为了能够占满整个容器，进度条的高度为父容器的高度的100%。

在progress-bar__outer类的容器中，我们采用灰色的背景颜色，表示总进度。在progress-bar__inner中，我们采用想要表示进度的颜色，表示传入的进度值。

传入百分比，供文本和进度条渲染。(以Vue为例)

当使用Vue来制作的话，我们可以更改下标签结构，使进度条为父组件显示数据。

<template>  
<div class="progress">
    <!-- whole bar -->
    <div class="progress-bar">
      <!-- outside part -->
      <div class="progress-bar__inner" :style="innerStyle">
        <!-- inside part -->
        <div class="progress-bar__outer">
        </div>
      </div>
    </div>
    <!-- text part with line-->
    <div class="progress-text">
      <span>{{ `${percentage}%` }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps(progressProps)
const innerStyle = {
  width: `${props.percentage}%`
}
</script>

这样我们就完成了动态添加进度和文本。

总结

进度条的制作较为简单，当然也有更多操作，比如inner容器嵌入进度文本，使用flex-end让在进度条内部展示，使用before和after来缩短标签结构，制作环形进度条等等。