vue简单侧边栏封装+模拟侧边栏标签淡入淡出

项目场景：

提示：这里简述项目相关背景：

点击标签跳转到对应页面，当然用router-link和router-view可以实现。
这里用其他方法来模拟侧边导航栏点击后淡入淡出

---

解决方案：

一、封装自定义侧边栏

本案例菜单都为一级目录，所以此处只用ul/li自定义简单列表。（如果有其他需求乐意使用el-menu也可以自行编写）
1、创建组件SelfMenu.vue

<template>
	<div>
		<ul class="self-page-menu">
			<li v-for="(item,i) in pageMenu" :key="item.id" @click="changePage(item.id)" :class="{'self-active-node':activeNode==i}">{{item.name}}<i class="el-icon-caret-right self-icon"></i></li>
		</ul>
	</div>
</template>
<script>
export default {
	props:{
		pageMenu:{
			type:Array,
			default:()=>[]
		}
	},
	data(){
		return {
			activeNode:0
		}
	},
	methods:{
		changePage(i){
			this.activeNode = i;
			this.$emit("switchPageMenu",this.activeNode)
		}
	}
}
</script>
<style lang="scss" scoped>
.self-page-menu{
	list-style:none;
	padding:0;
	margin:0;
	li{
		cursor:pointer;
		color:#666;
		font-size:16px;
		height:50px;
		padding:17px 40px 14px;
		vertical-align:text-top;
		.self-icon{
			float:right;
		}
	}
	.self-active-node{
		color:#1355FD;
		background-color:#E9EDFD;
	}
}
</style>

二、子页淡入淡出并且侧边栏随子页高度变化

以A、B两个为子页面（假设A页面内容少，小于页面滚动临界值；B页面内容多，大于滚动临界值）总页面为index.vue
1、A、B子页面
A页面

<template>
	<div>这是A页面</div>
</template>
<script>
export default {}
</script>

B页面

<template>
	<div>这是B页面<h1>内容</h1>（。。。省略300行）</div>
</template>
<script>
export default {}
</script>

2、index.vue

<template>
	<div style="height:100%">
		<div class="main-area" ref="pageWrap">
			<div class="bg p-left">
				<self-menu @switchPageMenu="switchMenu" :page-menu="pageMenu"></self-menu>
			</div>
			<div class="p-right" ref="pageHeight">
				<template v-if="recentPage==0">
					<transition name="fade-transform" mode="out-in">
						<div :key="0" class="back right-item"><page-a></page-a></div>
					</transition>
				</template>
				<template v-if="recentPage==1">
					<transition name="fade-transform" mode="out-in">
						<div :key="1" class="back right-item"><page-b></page-b></div>
					</transition>
				</template>
			</div>
		</div>
	</div>
</template>
<script>
import SelfMenu from "./components/SelfMenu.vue";
import pageA from "./A.vue";
import pageB from "./B.vue";
export default {
	components:{pageA,pageB},
	data:{
		return {
			recentPage:0,
			minPageHeight:0,//高度记录
			pageMenu:[{name:'A页面',id:0},{name:'B页面',id:1}]
		}
	},
	mounted(){
		this.getHeight();//此处监听被子页面称起父元素的高度，来决定菜单高度
		window.onresize = () => {
			this.minPageHeight = this.$refs.pageWrap.clientHeight;
			this.setTimeOut(() => {this.getHeight(), 500})
		}
	},
	methods:{
		switchMenu(data){
			this.recentPage = data;
			this.getHeight();
		},
		getHeight(){//实现侧边栏随子页面高度变化效果
			//由于父元素min-height属性无法继承高度，所以需手动给右测父元素添加height属性
			if(!this.recentPage){//这里判断高度小于滚动临界值的所有页面，例如A页面
				this.$refs.pageHeight.style.height = this.minPageHeight + 'px';
			} else {//这里判断高度大于滚动临界值的所有页面，例如B页面
				this.$refs.pageHegith.style.height = 'auto';
			}
		}
	}
}
</script>
<style lang="scss" scoped>
//过渡效果
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
//板块背景
.back{
	background-color:#fff;
	border-radius:10px;
}
.main-area{
	//margin间距包括顶栏共123px,所以保证子页面高度不够情况时，最小高度为滚动临界值
	min-height:calc(100% - 123px);
	box-sizing:border-box;
	position:relative;
	.p-left{
		position:absolute;
		min-height:100%;
		width:280px;
		padding-top:40px;
	}
	.p-right{
		min-height:100%;//限制右侧最小高度
		width:calc(100% - 290px);//与左边菜单栏相隔10px
		margin-left:290px;
		.right-item{
			height:auto;//不限制嵌套子页面高度
			min-height:100%;
			padding:23px 30px 39px 30px;
		}
	}
}
</style>