vue2 自定义步骤条

实现效果：

实现过程：

组件代码：

<!-- component-name -->
<template>
  <div class="steeps">
    <div class="step_item" v-for="(v, i) in stepData" :key="i">
      <div
        class="step_line"
        :class="[i < active ? 'step_line_focus' : '']"
        v-if="i != stepData.length - 1"
      ></div>
      <div class="step_head">
        <div
          :class="[
            active == i ? 'step_icon step_focus' : 'step_success',
            active < i ? 'step_wait' : '',
          ]"
        >
          <div
            :class="[
              active == i ? 'step_text step_text_focus' : 'step_text_success',
              active < i ? 'step_text_wait' : '',
            ]"
          >
            <i
              v-if="i < active"
              class="el-step__icon-inner is-status el-icon-check"
            ></i>
            <span v-else>