vue tab切换

1.可以用element里面的Tabs 组件点这里

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

2，我们自己可以写一个

 <ul>
     <li v-for="(tab,index) in tabs" :class="{active:numIndex==index}"                 @click="toggle(index)" :key="index">{{tab}} <span v-if="tab=='已选择'">（{{selectNum}}）</span></li>
</ul>
  <div class="box_testPaper">
    <div class="box_conten" v-if="numIndex==0" :key="numIndex"></div>
    <div class="box_conten" v-if="numIndex==1" :key="numIndex"></div>
  </div>
 data() {
    return {
      numIndex: 0,
      tabs: ["tab1", "tab2", "tab3"],
    }
}
methods: {
  toggle(val){
   console.log(val)
  }
}

//给当前的tab样式
 ul {
      li {
        display: inline-block;
        cursor: pointer;
      }
      .active {
        color:red;
        border-bottom: 1px solid #409eff;
      }
    }

如果有多个页面用到tab可以把头部的那个封装成组件

<template>
    <div class="tabs_main">
      <ul class="tabs">
        <li class="li_tab" v-for="(item,index) in tabsParam" :key="index" @click="toggleTabs(item,index)" :class="{active:index===nowIndex}">{{item}}</li>
      </ul>
    </div>
</template>
<script>
export default {
    name: 'Header',
    components: {},
    props:{
    tabsParam:{
        type:Array,
        require:true,
        default:()=>{
            return []
        }
    }
    },
    data(){
        return {
            nowIndex:0,
        }
    },
    methods: {
        toggleTabs(item,index){
            this.nowIndex=index
            var obj={
                label:item,
                id:index
            }
            this.$emit("toggleChange",obj)
        }
    },
    created(){
         var obj={
                label:this.tabsParam[0],
                id:0
            }
        this.$emit("toggleChange",obj)
    }
}
</script>
<style lang="scss" scoped>
.tabs_main {
    margin-bottom: 20px;
    // 上边tabs导航切换
    .tabs {
      // width: 100%;
      height: 40px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      opacity: 1;
      border-radius: 4px;
      padding: 0px;
    }
    .li_tab {
      width: 96px;
      height: 40px;
      line-height: 40px;
      font-size:14px; 
      font-weight: 400;
      display: inline-block;
      text-align: center;
      cursor: pointer;
      transition: ease-in 0.2s;
    }
    .li_tab.active {
      background: #409EFF;
      color:#fff;
      // background: pink;
    }
    .li_tab:first-child{
      border-radius: 4px 0px 0px 4px;
    }
  }
</style>

用法：引用tabs这个组件，把切换标题放到数组传给子组件。然后接收子组件切时换传递给父组件的内容就行了

<template>
  <div class="father">
   
 <tabs-com :tabsParam="tabsParam" @toggleChange="toggleTabs"></tabs-com>
    
  </div>
</template>
<script>
  import tabsCom from "../components/tabs.vue"; //当前位置提示
  export default {
    name: "Father",
    components: {
      tabsCom
    },
    data() {
      return {
        tabsParam: ["tab1", "tab2"]
      };
    },
    watch: {},
    methods: {
      //切换tab项
      toggleTabs(obj) {
        console.log(obj);
      }
    },
    created() { }
  };
</script>
<style lang="scss" scoped>

</style>