vue需要一个步骤条的组件，但是element ui组件的步骤条和自己需要的还是有点差别的，于是自己写了一个，并记录下来。

使用组件

<steps :list="stepsList" :active="stepsActive"></steps>
data() {
    return {
      stepsActive: 0,
      stepsList: [{
        title: '确认订单'
      }, {
        title: '订单支付'
      }, {
        title: '支付成功'
      }]
    }
}

组件代码

/**
* @Author: 858834013@qq.com
* @Name: steps
* @Date: 2022-08-21
* @Desc: 步骤条
*/
<template>
  <div class="steps">
    <div class="stepsLine"></div>
    <div class="stepsItem" :class="{active:active>=index}" v-for="(item,index) in list" :key="index">
      <div class="stepsItemInner">
        <div class="stepNum">{{ index + 1 }}</div>
        <div class="stepTitle">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "steps",
  components: {},
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    active: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  data() {
  },
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.steps {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  position: relative;
  background: #fff;

  .stepsItem {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    background: #fff;
    position: relative;
    padding-left: 3%;
    padding-right: 3%;
    flex-shrink: 0;
    z-index: 1;
  }

  .stepsItemInner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .stepNum {
      width: 28px;
      height: 28px;
      background: rgba(#999999, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      border-radius: 50%;
      font-size: 20px;
      font-family: MicrosoftYaHei;
      color: #999999;
    }

    .stepTitle {
      margin-left: 16px;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      color: #999999;
    }
  }

  .stepsItem.active {
    .stepsItemInner {
      .stepNum {
        background: rgba(50, 125, 255, 1);
        color: #FFFFFF;
      }

      .stepTitle {
        color: rgba(51, 51, 51, 1);
      }
    }
  }
}

.stepsLine {
  width: 70%;
  height: 1px;
  background: rgba(#999999, 0.3);
  position: absolute;
}
</style>

github地址

步骤条

演示