vue tab切换

<template>
  <div class="editInform">
    <div class="testNav">
      <div :class="{'selected':tab === 1}" class="tabItem baseInfo">
        ①&nbsp;&nbsp;&nbsp;&nbsp;编辑基础信息
        <div class="arrow-right"></div>
      </div>
      <div :class="{'selected':tab === 2}" class="tabItem editBaseDetail">
        ②&nbsp;&nbsp;&nbsp;&nbsp;编辑商品详情
        <div class="arrow-left"></div>
      </div>
    </div>
    <div class="container">
      <keep-alive>
        <edit-base-info v-if="tab === 1" @nextStep="nextStep" @goBackPage="$router.go(-1)"></edit-base-info>
        <edit-base-detail v-else @goBackLastStep="goBackLastStep"></edit-base-detail>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import editBaseInfo from './editBaseInfo'
import editBaseDetail from './editBaseDetail'
export default {
  name: 'editInform',
  components: {
    editBaseInfo,
    editBaseDetail
  },
  data() {
    return {
      tab: 1
    }
  },
  methods: {
    nextStep() {
      this.toTab(2)
    },
    goBackLastStep() {
      this.tab = 1
    },
    toTab(index) {
      this.tab = index;
    },
  }
}
</script>

<style scoped lang="less">
  .editInform{
    .testNav{
      display: flex;
    }
    .tabItem{
      height:45px;
      width:50%;
      line-height: 45px;
      color: #666666;
      font-size: 16px;
      text-align: center;
      display: inline-block;
      position: relative;
      background:linear-gradient(147deg,rgba(63,141,255,1) 0%,rgba(24,173,255,1) 100%);
      color: #fff;
    }
    .arrow-left {
      font-size: 0;
      line-height: 0;
      border-width: 22.5px;
      border-color: #F5F7FA;
      border-right-width: 0;
      border-style: dashed;
      border-left-style: solid;
      border-top-color: transparent;
      border-bottom-color: transparent;
      position: absolute;
      left: 0;
      top: 0px;
      z-index: 10;
    }
    .editBaseDetail{
      background:#F9FAFC;
      color: #666;
    }
    .arrow-right {
      font-size: 0;
      line-height: 0;
      border-width: 22.5px;
      border-color: #18ADFF;
      border-right-width: 0;
      border-style: dashed;
      border-left-style: solid;
      border-top-color: transparent;
      border-bottom-color: transparent;
      position: absolute;
      right: -22px;
      top: 0px;
      z-index: 20;
    }
    .baseInfo{
      margin-right: 6px;
    }
    .selected{
      color: #fff;
      background:linear-gradient(147deg,rgba(63,141,255,1) 0%,rgba(24,173,255,1) 100%);
    }
  }
</style>