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>
大功告成!