复刻elementUI的步骤条Steps
摘要：UI小姐姐设计了步骤条，跟饿了么样式差距比较大，不想一层层改样式决定复刻一个steps步骤条组件。
最终展示如图：
实现布局
简单的布局不再赘述，主要考虑到步骤数量sList是可变的，每个步骤之间要一个虚线连接起来，调整页面大小的时候虚线也要动态伸缩。
1、首先简单的使用ul>li flex实现静态页面
<ul class="outer-box flex"><li class="flex" :class="{ active: activeIdx >= index }" v-for="(item, index) in sList" :key="index"><div v-if="activeIdx <= index" class="serialNum flex">{{ index + 1 }}</div><i v-else class="el-icon-success"></i><div class="info">{{ item}}</div></li></ul>// style.flex {display: flex;align-items: center;justify-content: center;
}
.outer-box {height: 88px;background: #f0f6ff;padding: 0px 100px;margin: 0 auto;margin-bottom: 30px;.el-icon-success {font-size: 28px;color: #165dff;margin-right: 12px;}}
2、然后通过伪元素 ::after 实现步骤之间的虚线
li {&::after {content: '';display: block;width: 200px; // 当前虚线的宽度是固定的height: 0px;border: 1px dashed #848cac;margin: 0 40px;}&:last-child {&::after {content: '';display: block;flex: none;border: 0;width: 0;margin: 0;}}
3、通过.active 样式将已完成的步骤改变样式
.active {.serialNum {// ...}.desc {// ...}}
4、应用 flex属性flex-basis、flex-shrink、flex-grow实现动态布局
- flex-basis 分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
默认值是auto ➡ 即项目本来大小
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
- flex-grow 定义项目的放大比例，默认为0 ，即如果剩余空间，也不放大
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
- flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者0不缩小。
li {flex-basis: 50%;&::after {content: '';display: block;//width: 200px;flex: 1; // 步骤之间的虚线宽度可伸缩height: 0px;border: 1px dashed #848cac;margin: 0 40px;}&:last-child { flex-shrink: 0;flex-grow: 0;flex-basis: auto !important; // 最后一个步骤不伸缩，宽度为固定的自身的宽度&::after {content: '';display: block;flex: none;border: 0;width: 0;margin: 0;}}｝