在vue中原生封装一个步骤条组件

在项目中我们经常会遇到需要实现进度条、步骤条的效果，因此我在vue中封装了一个效果如上图的步骤条组件。

一、在src/components下新建一个process组件
1.html部分

<div class="showProcess">
    <ul>
      <li class="list" v-for="(item, index) in processList" :key="index">
        <div class="ProcessBox">
          <span class="Process active" v-if="index<step">        
            <img  src="@/assets/imgs/activeProcess.png" alt="">
          </span>
          <span class="Process" :class="{ active:index==step}" v-else>0{{index+1}}</span>
          <div class="ProcessName" :class="{ actives:index<=step}">
            <span>{{item.name}}</span>
          </div>
        </div>
      </li>
    </ul>
</div>

2.数据部分 props接收父组件传过来的step(代表进行到哪一个步骤)

 props: {
    step: {
      type: Number,
      default: 0,
    },
  },
data(){
    return{
        processList:[

        ]
    }
}

3.css部分 用伪元素和伪类来控制样式

.showProcess {
  box-sizing: border-box;
  padding: 36px 40px;
  width: 100%;
  background-color: #ffffff;
  ul {
    display: flex;
    align-items: center;
    justify-content:center;
    .list {
      .ProcessBox {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-weight: 400;
        text-align: center;
        .Process {
          width: 64px;
          height: 64px;
          background: #CCCCCC;
          border-radius: 50%;
          font-size: 32px;
          font-family: Impact;
          font-weight: 400;
          color: #ffffff;
          line-height: 64px;
          margin: 0 90px;
          img{
            width: 64px;
            height: 64px;
          }
        }
        .ProcessName {
          max-width: 165px;
          height: 16px;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #818181;
          margin-top: 25px;
        }
        .active {
          background: #0852c4;
        }
        .actives {
          color: #0852c4;
        }
      }
    }
  }
}
/* 以下是关键部分 */
.Process{
  position: relative;
  /* 利用伪元素来添加左右横线 */
  &:before,&:after{
    content: '';
    width: 95px;
    height: 1px;
    border-bottom: 4px solid #ccc;
    display: inline-block;
    position: absolute;
    top: 30px;
  }
  &:before{
    left: 60px;
  }
  &:after{
    right: 60px;
  }
}
.active{
  &:before,&:after{
    border-bottom: 4px solid #0852C4;
  }
}
/* 利用伪类来控制样式去掉首尾的横线 */
.list:first-child{
  .Process{
    &::after{
      display: none;
    }
  }
}
.list:last-child{
  .Process{
    &::before{
      display: none;
    }
  }
}

以上代码即可实现,
最后在父组件中引入使用即可

 <process :step="3"></process>