vue折叠面板(左右模块联动)

vue折叠面板通过高度计算进行展开和收齐,给模块添加绝对定位实现联动效果.

先看一下效果

HTML代码

<div id="box">
	<div class="flex">
		<div class="left">
			<div ref="count" class="leftSon">
				<p>吕布</p>
				<p>关羽</p>
				<p>张飞</p>
				<p>赵云</p>
				<p>马超</p>
				<p>典韦</p>
				<p>许褚</p>
				<p>黄忠</p>
				<p>颜良</p>
				<p>文丑</p>
			</div>
			<div class="foot">
				<img :src="rotate?'img/5.png':'img/6.png'" @click="arrow"/>
			</div>
		</div>
		<div class="right">
			<div class="rightSon">
				<p>李元霸</p>
				<p>宇文成都</p>
				<p>裴元庆</p>
				<p>雄阔海</p>
				<p>伍云召</p>
				<p>伍天锡</p>
				<p>罗成</p>
				<p>杨林</p>
				<p>魏文通</p>
			</div>
		</div>
	</div>
</div>

CSS代码

.flex {
	display: flex;
	justify-content: space-between;
	width: 50%;
	margin: 30px auto;
	padding: 20px;
	box-shadow: 0 0 10px grey;
}
.left {
	width: 70%;
	position: relative;
	background: linear-gradient(to right,#009FFF,#ec2F4B);
	box-shadow: 0 0 10px grey;
	color: white;
}
.right {
	width: 25%;
	height: auto;
	overflow-y: auto;
	position: relative;
	background: linear-gradient(to top,#654ea3,#eaafc8);
	box-shadow: 0 0 10px grey;
	color: white;
}
.rightSon {
	position: absolute;//很关键
}
.leftSon {
	height: 0;
	overflow: hidden;
    transition: all .5s;
}
.foot {
	height: 50px;
	position: relative;
	background: white;
}
img {
	position: absolute;
	bottom: -30%;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
}
p {
	margin-left: 10px;
}

JS代码

<script>
	new Vue({
		el:'#box',
			data(){
				return{
					Initialheight: 100, //初始高度
					rotate: false,
				}
			},
			mounted() {
				this.arrow()
			},
			methods: {
				arrow() {
				   this.rotate = !this.rotate;
				   const count = this.$refs.count;
				   let height = count.offsetHeight;
				   if(height === this.Initialheight){
					   count.style.height = 'auto';
					   height = count.offsetHeight;
					   count.style.height = this.Initialheight + 'px';
					   let f = document.body.offsetHeight;
					   count.style.height = height + 'px';
				   }else {
					   count.style.height = this.Initialheight + 'px';
				}
			}
		}
	})
</script>

大功告成!