tabs标签页

Posted 2021-01-01 zhuuuu

封装tabs组件

.切换tab事件

.slot 内容分发

.动态组件 Keep-alive:若把切换出去的组件保留在内存中，避免重新渲染，可保留它的状态

<template>
<div>
    <ul class="tabs-top">
        <li class="tabs-head" v-for="(item,index) in tabsList"  :class="{‘tabs-active‘:tabsIndex==item.index}" @click="handleChange(item)">{{item.title}}</li>
    </ul>
    <div class="tabs-content">
        <slot></slot>
    </div>
</div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    props:{
        tabsList:Array,
        tabsIndex:{
            type:Number,
            default:0
        }
    },
    methods:{
        handleChange(tab){
            this.$emit(‘change-tabs‘,tab)
        }
    }
}
</script>
<style>
    .tabs-top{
        width:100%;
        background: #F4F4F4;
        vertical-align: middle;
        border-bottom: 1px solid #19bc9c;
       
    }
   .tabs-head{
       display: inline-block;
       width:12em;
       text-align: center;
       background-color:lightgrey;
       font-size: 1.14em;
       padding:0.7em 1em;
       border-radius:4px;
       margin-bottom: -1px;
       cursor: pointer;
   }
   .tabs-active{
       background: #fff;
       border: 1px solid #19bc9c;
       border-bottom-color:#fff;
   }
</style>

引用

<template>
      <tabs :tabsList="tabsList" :tabsIndex="tabsIndex" @change-tabs="changeTabs">
             <Keep-alive>
                    <component :is="currentContent">
                     </component>
                </Keep-alive>
         </tabs>
</template>
<script>
 import Tabs from ‘./Tabs‘
 import editInfo from ‘./editInfo.vue‘
 import object from ‘./object.vue‘
 export default {
    data() {
        return {
            tabsIndex:0,
            currentContent:‘one‘,
            tabsList:[
                {index:0,title:‘知识树‘,component:‘one‘},
                {index:1,title:‘能力树‘,component:‘two‘}
            ]
        };
      },
      methods:{
          changeTabs(tab){
                this.tabsIndex=tab.index;
                this.currentContent=tab.component
          }
// 若不在下面的内容区显示
        changeTabs(tab){
              if(tab.index!==1){
                this.tabsIndex=tab.index;
                this.currentContent=tab.component
              }else{
                console.log(1)
              }
          }
      },
       components:{‘one‘:editInfo,‘two‘:object},   
}
</script>

结果演示