vue 手写step 组件结合a-popover一起使用

 <div class="wt-step">
    <div class="horizontal">
      <div class="item-wrapper">
        <div
          class="item"
          :class="[{ current: item.serviceState }]"
          v-for="(item, index) of dataProgress"
          :key="index"
          @tap="switchTap(index)"
        >
          <a-popover>
            <template slot="content">
              <p>{{ item.sceneNode }}</p>
            </template>
            <!-- step内容 -->
            <div class="line" v-if="index != dataProgress.length - 1"></div>
            <div
              :class="[{ active: item.serviceState }]"
              v-if="type == 'default'"
            >
              {{ index + 1 }}
            </div>
            <div
              :class="[
                { active: item.serviceState },
                { 'icon-check': item.serviceState }
              ]"
              v-else
            ></div>
          </a-popover>
        </div>
      </div>
    </div>
  </div>

less

.wt-step {
  height: 100%;
  background: #fff;
  width: 100%;

  .horizontal {
    background: #fff;
    width: 100%;
    height: 100%;
    .item-wrapper {
      display: flex;
      height: 100%;
      width: 100%;

      .item {
        text-align: center;
        align-items: center;
        flex: 1;
        position: relative;
        color: #333;
        display: flex;
        justify-content: space-around;
        &.current {
          .line {
            background-color: #2db7f5;
          }
        }
        &:first-child {
          margin-left: -0.5rem;
        }
        &:last-child {
          margin-right: -0.5rem;
        }
        p {
          font-size: 0.7rem;
          margin-bottom: 1.5rem;
          line-height: 2rem;
        }
        &.current p {
          color: #1bb5f1;
        }
        .line {
          height: 0.1rem;
          background: #ccc;
          width: 100%;
          position: absolute;
          top:50%;
          transform: translateY(-50%);
          border-radius: 0px;
          left: 52%;
          z-index: 1;
        }
        div {
          background: #ccc;
          width: 1.2rem;
          height: 1.2rem;
          border-radius: 50%;
          display: inline-block;
          z-index: 2;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          font-size: 0.7rem;
          color: #a9a9a9;
          line-height: 1.2rem;
          &.active {
            background-color: #2db7f5;
            color: #fff;
          }
        }
      }
    }
  }

  .zanwu {
    text-align: center;
  }
}