## 前言步骤条组件是使用频率非常高的一个组件，今天咱们就来剖析一下他，看看它到底是怎么实现的。咱先来看一下这次实现的效果： ![进度条.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/00241e146e7b488aa4ed096c6ab3351a~tplv-k3u1fbpfcp-watermark.image?) ## 使用场景我们这次的这个进度条的使用场景是`机加行业` 。机加行业字面意思就是机器加工、零件加工，也就是我们常说的B端，但是`千万不要`理解为 `机加 == B端`。这些零件加工啥的得有个地方啊，在这里我们管零件加工的地方叫做`车间`。我们这里的状态：开立、确认、接收、开工、完工都是针对任务而言的。车间主任 `贾达空` 在 10-24日创建了`任务A`，此时任务A的状态为`开立态`，车床上的负责人`张全友` 收到任务A后向上级确认任务是否还有修改，没有修改后将任务A的状态变为`确认态`。任务A继续下发，状态也继续在改变。 ## 实现思路这个组件从外观上很好判断，它是由一个一个节点组成的，节点结构如下： ```html

开立

贾达空

10-24

``` 我们再来给这个节点上点css看一下效果： ```scss .step-node { width: 100px; height: auto; border: 1px solid cornflowerblue; box-sizing: border-box; .step-node-status { display: flex; justify-content: center; align-items: center; } .step-node-node { width: 100%; height: 60px; position: relative; display: flex; justify-content: center; align-items: center; .step-node-node-ball { width: 15px; height: 15px; background: rgba(24, 182, 129, 1); border-radius: 50%; z-index: 99; } .step-node-node-line { position: absolute; width: 100%; height: 2px; background: rgba(220, 220, 220, 1); } } .step-node-people, .step-node-time { width: 100%; height: 20px; display: flex; justify-content: center; align-items: center; font-size: 10px; } .step-node-time { color: #BFBFBF; } } ``` 效果如下： ![step2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58982b9eb34d4d49ab46b699a0619839~tplv-k3u1fbpfcp-watermark.image?) 如果此时我们将棕色的线 left `100%`呢，css修改如下： ```css .step-node { .step-node-node { position: relative; .step-node-node-line { left: 100%; } } } ``` 效果如下: ![step3.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7aa35282141941ad8251379646d6d210~tplv-k3u1fbpfcp-watermark.image?) 很好，把这个节点想象成n份（水平方向上），效果如下： ![step4.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20bf9dfa0f4546e59be2ca56f7e54d4f~tplv-k3u1fbpfcp-watermark.image?) 到此一个简单的步骤条就完事了，别忘了最后一个节点不渲染line，小球的颜色也需要改变一下，市面上实现步骤条的方式也都差不多，`antd` 也是使用定位+left（虽然是这么说，但是在antd的基础上如果想实现定制，代码改动量改动会很大），我倒是觉得咱们这个的扩展性很强，因为逻辑简单，哈哈哈。