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

最新推荐文章于 2024-06-17 13:40:23 发布

原创最新推荐文章于 2024-06-17 13:40:23 发布 · 425 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

vue 同时被 2 个专栏收录

15 篇文章

订阅专栏

mt-tab-container

1 篇文章

订阅专栏

本文介绍如何使用Vue.js来实现选项卡切换功能，包括利用el-radio-group进行选择项的交互及监听活动选项卡的变化。

<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];
			}
	    },
    }