vue写一个步骤条

实际效果如下图，可根据自己需求修改

新建stepComp.vue文件

<div class="hk-step-comp">
    <div
      class="hk-step-item"
      :class="{ active: index + 1 == active, actived: index + 1 < active }"
      v-for="(item, index) in data"
      :key="index"
    >
      <div class="line" v-if="index !== 0"></div>
      <div class="label-name">
        <div>
          <span class="step-number">
            {{ index + 1 }}
          </span>
        </div>
        <div class="step-word">
          <span class="step-name">{{ item.name }}</span>
        </div>
        <div class="arrow" v-if="active == index + 1"></div>
      </div>
    </div>
  </div>
 
<script>
export default {
// 传入参数
  props: {
  // 几个步骤
    data: {
      type: Array,
      default: []
    },
    // 当前所在第几步
    active: {
      type: Number,
      default: 1
    }
  }
}
</script>

<style lang="scss" scoped>
.hk-step-comp {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 60px 0 50px 0;
  border-radius: 10px;
  margin-bottom: 15px;
  .hk-step-item {
    display: flex;
    align-items: center;
    color: #999;

    .label-name {
      position: relative;
      display: flex;
      align-items: baseline;
      // > span {
      span {
        display: inline-block;
      }
      .step-number {
        text-align: center;
        width: 36px;
        height: 36px;
        font-size: 18px;
        font-weight: 600;
        background-color: #e4e4e4;
        border: 1px solid #d2d2d2;
        border-radius: 18px;
        line-height: 36px;
        margin-right: 10px;
        font-size: 16px;
      }
      .step-name {
        color: #000;
        opacity: 0.5;
      }
      .step-label {
        font-size: 14px;
        margin-top: 10px;
      }
      .step-word {
        text-align: left;
      }
    }
    .line {
      height: 1px;
      background-color: #e4e4e4;
      width: 130px;
      margin: 0 10px;
      // margin-top: -20px;
    }
    .arrow {
      position: absolute;
      width: 100%;
      text-align: center;
    }
    .arrow:before {
      content: '';
      display: none;
      position: absolute;
      bottom: -50px;
      border-top: 10px solid #fff;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
    }
  }
  .hk-step-item.active {
    color: #334251;
    .step-number {
      color: #fff;
      background-color: #004ea8;
      border: 1px solid #004ea8;
    }
    .step-name {
      opacity: 1;
    }
    .line {
      background-color: #004ea8;
    }
  }
  // 已完成步骤样式
  .hk-step-item.actived {
    color: #334251;
    .step-number {
      color: #fff;
      background-color: #004ea8;
      border: 1px solid #004ea8;
    }
    .step-name {
      opacity: 1;
    }
    .line {
      background-color: #004ea8;
    }
  }
}
</style>

在父组件中引入

import StepComp from './components/StepComp.vue'
export default {
  components: { StepComp },
  data() {
    return {
    // name即位每一步名称
      list: [{ name: '第一步' }, { name: '第二步' }, { name: '第三步' }],
      active: 2
    }
  }
}