复刻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;
      }
    }
  ｝