<div class="tab-nav">
<el-radio-group v-model="radio" size="mini" @change="tabchange">
<el-radio-button v-for="(item,index) in nav" :label="item">{{item}}
</el-radio-button>
</el-radio-group>
</div>
<mt-tab-container v-model="activeName" :swipeable='true'>
<mt-tab-container-item id="tab-container1">
菜单1
</mt-tab-container-item>
<mt-tab-container-item id="tab-container2">
菜单2
</mt-tab-container-item>
<mt-tab-container-item id="tab-container3">
菜单3
</mt-tab-container-item>
</mt-tab-container>
data(){
return {
nav:['菜单1','菜单2','菜单3'],
radio:'菜单1',
activeName: 'tab-container1',
}
},
tabchange(value){
this.radio=value;
if(this.radio==this.nav[0]){
this.activeName='tab-container1';
}else if(this.radio==this.nav[1]){
this.activeName='tab-container2';
}else{
this.activeName='tab-container3';
}
},
watch: {
activeName:function (newValue) {
if(newValue=='tab-container1'){
this.radio=this.nav[0];
}else if(newValue=='tab-container2'){
this.radio=this.nav[1];
}else{
this.radio=this.nav[2];
}
},
}