封装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{
100%;
background: #F4F4F4;
vertical-align: middle;
border-bottom: 1px solid #19bc9c;
}
.tabs-head{
display: inline-block;
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>
结果演示
