vue 动态导航菜单切换显示不同的按钮的实现（实战经验总结）

最新推荐文章于 2024-07-23 09:16:46 发布

shangrila-xiu

最新推荐文章于 2024-07-23 09:16:46 发布

阅读量2.4k

点赞数 2

分类专栏： vue 文章标签：动态导航菜单切换显示不同的按钮的实现

本文链接：https://blog.csdn.net/lyx9611/article/details/102548347

版权

vue 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

首先，先布局

	<div class="pwyx-inde-page" id="pwyx-inde-page" v-cloak>
			<div class="pwyx-main">
				<!-- <div class="pwyx-left left">
					
				</div> -->
				<div class="pwyx-right left" >
					<div class="pwyx-index-tab">
						<div class="left">
							<ul>
								<li  v-for="(itemTab,index) in listTab" :key="index" :id="index" :class="{on:index==itemIndex}" @click="openWind(index)">{{itemTab.tabName}}</li>
							</ul>
							
						</div>
						<template>
							<div class="btn-posi">
								<div v-if="isShowbtn1"  class="left">
									<el-button>按钮1</el-button>
								</div>
								<div v-if="isShowbtn2"  class="left" >
									<el-button>按钮2</el-button>
								</div>
								<div v-if="isShowbtn3" class="left">
									<el-button>按钮3</el-button>
								</div>
							</div>
						</template>
						
					</div>
					<div class="clearfix"></div>
					<div class="pwyx-index-iframe">
						<iframe v-for="(itemTab,index) in listTab" :key="index"  id="main-index" v-if="index==itemIndex" 
                            :src="itemTab.url" width="100%" height="700" border="0" scrolling="auto"></iframe>
					</div>
				</div>
			</div>
		</div>

样式表

.pwyx-inde-page ul{width: 100%;height:100%;padding: 20px;}
			.pwyx-inde-page ul li{    cursor: pointer;
    float: left;
    width: 100px;
    line-height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    height: 30px;
    text-align: center;
    line-height: 26px;}
	.btn-posi{
		
	}

js

	new Vue({
				el: '#pwyx-inde-page',
				data: function() {
					return {
						itemIndex:0,
						isShowbtn1:false,
						isShowbtn2:false,
						isShowbtn3:false,
						listTab: [{
								"id": 1,
								"tabName": "业务受理",
								"url": "/pwyx/index/businese_accpet.html",
								
							},
							{
								"id": 2,
								"tabName": "业务受理",
								"url": "/pwyx/index/businese_accpet.html",
							},
							{
								"id": 3,
								"tabName": "业务受理",
								"url": "businese_accpet.html",
							},
							{
								"id": 4,
								"tabName": "业务受理",
								"url": "businese_accpet.html",
							},
							{
									"id": 5,
									"tabName": "业务受理",
									"url": "/pwyx/index/businese_accpet.html",
									
								},{
									"id": 6,
									"tabName": "业务受理",
									"url": "/pwyx/index/businese_accpet.html",
									
								},
						]
					}
				},
				methods: {
					openWind:function(index){
						this.itemIndex = index;
						console.log(index)
						if(index===1){
							this.isShowbtn1=false;
							this.isShowbtn2=true;
							this.isShowbtn3=false;
							return;
						}
						if(index===0){
							this.isShowbtn1=true;
							this.isShowbtn2=false;
							this.isShowbtn3=false;
						}
						if(index===3){
							this.isShowbtn1=false;
							this.isShowbtn2=true;
							this.isShowbtn3=true;
						}
						if(index===2){
							this.isShowbtn1=true;
							this.isShowbtn2=true;
							this.isShowbtn3=true;
						}
						reSetSize();
					}
				},
				mounted: function() {
					reSetSize();
					this.openWind(0);
				}
			});
			//根据浏览器大小调整iframe高度

			window.onresize = reSetSize;

			function reSetSize() {
				var windowsHeight = window.innerHeight;
				document.getElementById("main-index").style.height = (windowsHeight - 150) + "px";
			}