Mint-ui+Element-ui tab-container实现tab与滑动级联

安承教
2023-12-01
<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];
			}
	    },
    }

 类似资料: