基于vue2的tab标签页

效果截图：

方法一：（运用div+js+css代码（v-show））

标签代码：

<div class="tabModule">
    <div class="tabHeader">
        <span @click="productCenterCur=0" :class="{active:productCenterCur==0}">111</span>
        <span @click="productCenterCur=1" :class="{active:productCenterCur==1}">222</span>
        <span @click="productCenterCur=2" :class="{active:productCenterCur==2}">333</span>
        <span @click="productCenterCur=3" :class="{active:productCenterCur==3}">444</span>
        <span @click="productCenterCur=4" :class="{active:productCenterCur==4}">555</span>
        <span @click="productCenterCur=5" :class="{active:productCenterCur==5}">666</span>
    </div>
    <div class="tabContent">
        <div v-show="productCenterCur==0" class="tabModuleItem">
           111111111111
        </div>
        <div v-show="productCenterCur==1" class="tabModuleItem">
            2222222222222222222222
        </div>
        <div v-show="productCenterCur==2" class="tabModuleItem">
            333333333333333333333333333
        </div>
        <div v-show="productCenterCur==3" class="tabModuleItem">
            333333333333333333333333333
        </div>
        <div v-show="productCenterCur==4" class="tabModuleItem">
            333333333333333333333333333
        </div>
        <div v-show="productCenterCur==5" class="tabModuleItem">
            333333333333333333333333333
        </div>
    </div>
</div>

javascript代码：

<script>
export default {
    name: "ProductCenter",
    components: {
    },
    data () {
    return {
        productCenterCur:0,
    }
    },
    mounted(){},
    methods: {}
}
</script>

css代码：

 .tabModule{
    width: 100%;
  }
  .tabModule .tabHeader{
    width: 100%;
    display: flex;
    justify-content: center;
    white-space: nowrap
  }
  .tabModule .tabHeader span{
    padding: 4px 10px;
    margin: 3px 36px;
  }
  .tabModule .tabHeader .active{
    color: #FFFFFF;
    background-color: #0069AB;
    border-radius: 4px;
  }
  .tabModule .tabContent{
    margin: 50px 0;
  }
  .tabModule .tabContent .tabModuleItem{
    width: 100%;
  }

方法二：（主要用element ui组件的标签页）

标签代码：

<el-tabs v-model="activeName" @tab-click="handleClick" class="tabStyle">
    <el-tab-pane label="111" name="first">11111111111</el-tab-pane>
    <el-tab-pane label="222" name="second">22222222222222</el-tab-pane>
    <el-tab-pane label="333" name="third">3333333333333</el-tab-pane>
    <el-tab-pane label="444" name="fourth">444444444444444</el-tab-pane>
</el-tabs>

js代码：

<script>
  export default {
    name: "EngineeringCase",
    components: {
    },
    data () {
      return {
        activeName: 'first',
      }
    },
  }
  </script>
  

css代码：

// 标签页
.tabStyle ::v-deep .el-tabs__nav-wrap::after{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 0px;
    background-color: rgba(0,0,0,0);
    z-index: -1;
}
.tabStyle ::v-deep .el-tabs__nav-scroll{
    display: flex;
    justify-content: center;
}
.tabStyle ::v-deep .el-tabs__active-bar{
    height: 0;
}
.tabStyle ::v-deep .el-tabs__item.is-active {
    color: #FFFFFF;
    background: #000000;
    border-radius: 4px;
}
.tabStyle ::v-deep .el-tabs__item:hover{
    color: #000000;
}
.tabStyle ::v-deep .el-tabs__item.is-active:hover{
    color: #FFFFFF;
}
.tabStyle ::v-deep .el-tabs__item{
    padding: 4px 18px !important;
    height: unset;
    line-height: unset;
    margin: 0 50px;
}