vue步骤条

<template>
  <div class="editInform">
    <div class="testNav">
      <div class="flow-item flow-item-3" @click="toTab(1)">
        <div class="firstStep" :class="{'active': tab === 1}">
          ①编辑基本信息
        </div>
      </div>
      <div class="flow-item flow-item-3" @click="toTab(2)">
        <div :class="{'active': tab === 2}">
          ②编辑商品详情
        </div>
      </div>
      <div class="flow-item flow-item-3" @click="toTab(3)">
        <div class="lastStep" :class="{'active': tab === 3}">
          ③设置店铺
        </div>
      </div>
    </div>
    <div class="container">
        <div v-if="tab === 1" @nextStep="nextStep">111111111111111111111</div>
        <div v-if="tab === 2" @goBackLastStep="goBackLastStep">22222222222222</div>
        <div v-if="tab === 3" @goBackLastStep="goBackLastStep">3333333333333333</div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'editInform',
    data() {
      return {
        tab: 1
      }
    },
    methods: {
      nextStep() {
        this.toTab(2)
      },
      goBackLastStep() {
        this.tab = 1
      },
      toTab(index) {
        this.tab = index;
      },
    }
  }
</script>

<style scoped>
  .testNav{
    overflow: hidden;
  }
  .flow-item {
    float: left;
    width: 30.66667%;
    max-width: 380px;
    text-align: center;
    margin-bottom: 9px;
    padding-right: 6px;
  }
  .flow-item > div {
    position: relative;
    padding: 5px 0 5px 8px;
    line-height: 20px;
    background: #E8EBEF;
    white-space: nowrap;
    overflow: visible;
    color: #3c4353;

  }
  .flow-item > div:before, .flow-item > div:after {
    content: ' ';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 10px;
    border-color: transparent transparent transparent #E8EBEF;
    position: absolute;
    left: 0;
    top: 0;
  }
  .flow-item > div:after {
    left: auto;
    right: -10px;
    z-index: 2;
  }
  .flow-item-3 > div {
    background: #F9FAFC;
  }
  .flow-item-3 > div:before {
    border-left-color: #fff;
    z-index: 1;
  }
  .flow-item-3 > div:after {
    border-left-color: #F9FAFC;
  }
  .flow-item-3 > div:hover {
    background: #00A4FF;
    color: #fff;
    cursor: pointer;
  }
  .flow-item-3 > div:hover:after {
    border-left-color: #00A4FF;
  }
  .flow-item > div.firstStep:before{
    content: ' ';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0;
    border-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
  }
  .flow-item > div.lastStep:after{
    content: ' ';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0;
    border-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
  }
</style>