给我几分钟，还你一个步骤条

前言

步骤条组件是使用频率非常高的一个组件，今天咱们就来剖析一下他，看看它到底是怎么实现的。咱先来看一下这次实现的效果：

使用场景

我们这次的这个进度条的使用场景是机加行业 。机加行业字面意思就是机器加工、零件加工，也就是我们常说的B端，但是千万不要理解为 机加 == B端。这些零件加工啥的得有个地方啊，在这里我们管零件加工的地方叫做车间。我们这里的状态：开立、确认、接收、开工、完工都是针对任务而言的。车间主任 贾达空 在 10-24日创建了任务A， 此时任务A的状态为开立态，车床上的负责人张全友 收到任务A后向上级确认任务是否还有修改，没有修改后将任务A的状态变为确认态。任务A继续下发，状态也继续在改变。

实现思路

这个组件从外观上很好判断，它是由一个一个节点组成的，节点结构如下：

    <div class='step-node'>
        <div class='step-node-status'>开立</div>
        <div class='step-node-node'>
            <div class='step-node-node-ball'></div>
            <div class='step-node-node-line'></div>
        </div>
        <div class='step-node-people'>贾达空</div>
        <div class='step-node-time'>10-24</div>
    </div>

我们再来给这个节点上点css看一下效果：

    .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;
        }
    }

效果如下：

如果此时我们将棕色的线 left 100%呢，css修改如下：

    .step-node {
        .step-node-node {
            position: relative;
            .step-node-node-line {
                   left: 100%;
            }
        }
    }

效果如下:

很好，把这个节点想象成n份（水平方向上），效果如下：

到此一个简单的步骤条就完事了，别忘了最后一个节点不渲染line，小球的颜色也需要改变一下，市面上实现步骤条的方式也都差不多，antd 也是使用 定位+left（虽然是这么说，但是在antd的基础上如果想实现定制，代码改动量改动会很大），我倒是觉得咱们这个的扩展性很强，因为逻辑简单，哈哈哈。