一个步骤条组件

<template>
  <ul class="zd-step">
    <li v-for="(item, index) in list" :key="index">
      <div class="step-box">
        <div class="step-nomal ml-15" :class="currentStep == index ? 'successItem' : (currentStep > index?'preItem':'feltItem')">
            <div v-if="currentStep > index" class="check"></div><span v-else>{{index + 1}}</span>
           </div>
        <div  class="ml-5 medium-size " :class="currentStep == index  ? 'successTitile' : (currentStep > index?'preTitle':'feltTitile') ">{{
          item.title
        }}</div>
        <div class="line " v-if="index !== list.length - 1" :class="currentStep > index ? 'successLine' : 'feltLine'"></div>

      </div>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'myStep',
  props: {
    list: {
      // { status: 'primary info warning error' },
      type: Array,
      default: () => []
    },
    currentStep: {
      // 当前步骤
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      srcimg: require('@/assets/navtop_imgs/headportrait.png')
    }
  },
  mounted () {},
  computed: {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.zd-step {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  .step-box {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
      .step-nomal{
        width: 32px;
        height: 32px;
        border-radius: 50%;
        line-height: 32px;
      }
    .successItem {
        background: #1890FF;
        color: #fff;
        border: 1px solid #1890FF;
    }
    .preItem{
        background: #fff;
        color: #fff;
        border: 1px solid #1890FF;
        font-family:'Glyphicons Halflings'
    }
    .check{
        position: relative;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .check:before {
        position: absolute;
        content: '';
        width: 4px;
        height: 9px;
        transform: rotate(45deg);
        border-right: 2px solid #1890FF;
        border-bottom: 2px solid #1890FF;
        top: 8px;
    }

    .feltItem{
        background: #fff;
        color: #E1E1E1;
        border: 1px solid #E1E1E1;
    }
    .preTitle{
        color: rgba(0, 0, 0, 0.65);
    }
    .successTitile{
        color: #000000;
    }
    .feltTitile{
        color: rgba(0, 0, 0, 0.45);
    }
    .line{
        width: 192px;
        height: 1px;
        margin-left: 28px;
    }
    .successLine{
        background: #0485FF;
    }
    .feltLine{
        background: #E1E1E1;
    }
  }
}
</style>

• 外部使用

  <zd-step :list="stepList" :currentStep="pregress"></zd-step>
data：{
 pregress: 2,
 stepList: [
   { title: '基础信息' },
   // { title: '规则奖品' },
   { title: '引流成员' },
   { title: '设置欢迎语' }
 ]}

可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试