就说主要的几个吧，不影响阅读

examples文件夹内各xx.md文件经过打包，最终形成 html展示在网页中

packages文件夹内，各个子文件夹分别对应每个组件。内部文件分工，以steps 步骤条为例，介绍一下，其他组件同理。

props部分的属性，如下：

刚好对应文档中Steps Attributes部分的属性

观察到space属性在 steps.vue文件中，仅在定义时出现：

在 steps.vue里没有用到？没关系，与步骤条有关的vue文件，除了这个，不还有一个 step.vue。

step.vue :

可以看到， space 最后通过 style.flexBasis = space; 赋值于 flex-basis 属性上。

所以实际上就是通过flex-basis设置步骤条之间的间距。

通过类名 控制步骤条是水平还是垂直的样式：

默认是水平方向：

其实就是当前步骤条进展到哪一步了

当步骤条进度改变的时候，watch就会捕捉到变化，并且触发change事件

step.vue :

在step挂载之时，监听 index 的变化。

可以看到index初始值为-1：

通过VUE 插件调试可得，index代表的是当前step在整个steps中的序号，由0开始。

step.vue

在step.vue文件中，初始化时，将step的VNode虚拟节点的实例push进入steps.vue文件中的steps数组中。

steps.vue

在steps.vue文件中，监听到steps数组的变化，将会触发step.vue文件index变量的变化。

看下图红框内容：

它再次创建了两个监听，一个是对steps.vue文件中active的监听，一个是对processStatus的监听。 且不论processStatus是什么东西，单看监听的回调函数，都有对this.updateStatus()函数的调用。

updateStatus(val) { ... } 参数中的 val 即

中传入的 $parent.active 。

prevChild 接收兄弟实例，更准确地说是当前实例的上一个实例，如果当前实例是第一个，则prevChild 值为undefined。

在if中进行判断：

分别与 “ 当前激活的步骤 ” 互相比较，来赋予 “完成 finish ”、 “当前进行中 process ”、 “等待 wait ”三种状态。

哦，怪不得函数名叫updateStatus，更新状态嘛

再看最后一行if (prevChild)，如果当前步骤不是第一个，那么让当前步骤的上一个步骤触发calcProgress函数。同时将当前步骤的状态传进去。

可以得知，入参status即当前步骤的下一步骤的状态。

一开始设置了一个step变量，看最后，他被赋值给高度或者宽度。 如果步骤条水平方向，则赋值给宽度，如果是竖直方向，则赋值给高度。

最终style被赋值给this.lineStyle

我们从下图可以看到，Element UI的机制是，当前步骤紧邻的那条线是灰色的。

这个是因为函数calcProgress中这行代码：

如果当前步骤的下一步骤是process的状态，则将当前步骤的 step 变量设置为0。 就是彩色的那条线没有高度也没有宽度，这样显示出来的就是彩色线下面的灰色线了。

如果想要实现下图的效果：

只需将代码修改为这样即可：

可以人为设置这几个参数到底是什么

同process-status

布尔值

steps.vue

step.vue

通过isCenter接收

通过isCenter控制居中样式是否生效

同 align-center

内容差不多就是这样。过程中遇到不理解的也不用着急，慢慢看，从函数、变量的命名也能猜出来大概意思，如果现在深究不出来具体实现，可以先过一遍，有大概印象再过一遍。

而且现在源码解读内容很多，多看看也能大概理解一部分。