自定义步骤条 实现 两个节点 同时执行 两个 都高亮

效果图

<template>
  <div class="card-steps-container clearfix">
    <!-- 步骤条盒子 -->
    <div class="steps-box">
      <!-- 步骤条 -->
      <div class="Article-steps">
        <!-- 步骤条背景进度条 -->
        <div class="line">
          <span
            class="plan"
            :style="`width:${activeIndexCom * (100 / (stepList.length - 1)) - 100 / (stepList.length - 1) / 100}%`"
          ></span>
        </div>
        <!-- 每步部分 -->
        <span class="step" v-for="(i, index) in stepList" :key="index" :class="i.class">
          <span
            :class="[
              i.class === 'step-active' ? 'step-num' : 'step-numNo',
              activeIndexFinsh == i.stepIndex || i.stepIndex <= activeIndexFinsh ? 'step-active-selecet' : ''
            ]"
          >
            <span class="num">{{ i.stepIndex }}</span>
          </span>
          <p class="title" :style="{ color: activeIndex[activeIndex.length - 1] < i.stepIndex ? '#afb4c5' : '' }">
            {{ i.title }}
          </p>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BmBypassStep',

  props: {
    // 数据源
    /**
     * 数据格式
     * [ {stepIndex: 0,title: '旁路填报'},{stepIndex: 1,title: '旁路授权'}]
     * **/
    stepList: {
      type: Array,
      default: () => [],
      required: true
    },
    // 当前 所在的步骤
    /**
     * 格式
     * [1,2]
     * [2]
     * [99]
     * **/
    activeIndex: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  data() {
    return {
      activeIndexFinsh: 0
    }
  },
  computed: {
    activeIndexCom() {
      if (this.activeIndex.length > 1) {
        return this.activeIndex[this.activeIndex.length - 1]
      } else {
        return this.activeIndex[0]
      }
    }
  },
  created() {
    // this.stepList
    this.activeIndex.map(item => {
      this.stepList.map(items => {
        if (items.stepIndex === item) {
          this.$set(items, 'class', 'step-active')
        }
      })
    })
    this.activeIndexFinsh = this.activeIndex[0] - 1
  },
  methods: {
    // 点击下一步
    nextStep() {
      this.activeIndexFinsh += 1
    },
    // 点击上一步
    lastStep() {
      this.activeIndexFinsh -= 1
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';
@import '~@/styles/baseColor.scss';
.card-steps-container {
  background-color: $containerBg;
  box-shadow: 0 4px 40px 0 rgba(8, 11, 38, 0.05);
  border-radius: 12px;
  padding: 42px 40px 32px 40px;
  margin-bottom: 16px;
}
.steps-box {
  user-select: none;
  // width: 500px;
  position: relative;
  // <!-- 步骤条背景进度条 -->
  .line {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 20px;
    left: 2%;
    background: #ccc;
    width: 93%;
    height: 2px;
    overflow: hidden;
    .plan {
      position: absolute;
      top: 0;
      left: 0;
      height: 2px;
      transition: 0.5s;
      background: #003ccd;
    }
  }
  .Article-steps {
    display: flex;
    justify-content: space-between;
    .step {
      .title {
        color: #424665;
        font-weight: 400;
        text-align: center;
        width: 56px;
        margin-top: 5px;
        margin-left: 1.6em;
        text-indent: -4.5em;
      }
      .step-num {
        width: 36px;
        height: 36px;
        display: inline-block;
        border-radius: 50%;
        // line-height: 50px;
        color: #003ccd;
        border: 2px solid #003ccd;
        background: #fff;
        line-height: 32px;
        text-align: center;
        transition: 0.5s;

        .num {
          transition: 0.5s;
          display: inline-block;
        }
      }

      //
      .step-numNo {
        width: 36px;
        height: 36px;
        display: inline-block;
        border-radius: 50%;
        color: #afb4c5;
        border: 2px solid rgb(207, 216, 228);
        background: white;
        line-height: 36px;
        text-align: center;

        transform: rotate(0deg);
        transition: 0.5s;
        .num {
          transition: 0.5s;
          display: inline-block;
        }
      }
      .step-active-selecet {
        color: white;
        border: none;
        background: #003ccd;
      }
    }
  }

  //当前所在位置样式

  .step-active {
    .step-num {
      transform: rotate(90deg);
      .num {
        transform: rotate(-90deg);
      }
    }
    .title {
      color: #424665 !important;
    }
  }

  .step-active1 {
    .step-num {
      transform: rotate(90deg);
      .num {
        transform: rotate(-90deg);
      }
    }
    .title {
      color: #424665 !important;
    }
  }
  //全部完成样式
  .step-over {
    .plan {
      background: #91f062 !important;
    }
    .step-num {
      background: #67c23a !important;
    }
    .title {
      color: #67c23a !important;
    }
  }
  //对应内容
  .Article-content {
    padding: 20px;
    .btn {
      width: 150px;
      display: block;
      margin: 0 auto;
      margin-bottom: 10px;
      background: #2d7df5;
      color: white;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
    }
    .content {
      padding: 20px;
    }
  }
}
</style>

最后感谢 www.jianshu.com/p/dacf88124… 基于他的代码进行修改的