前言
你是否在开发中遇到过需要展开和收起面板的需求?使用 vue 可以轻松实现这一功能,让用户体验更加友好。本文将为大家介绍 vue 实现收起展开面板的方法,让你的页面更加简洁美观。
常规 css 实现
实现效果
源码如下
<template>
<div class="maxBox">
<div class="leftBox" :style="{width: play ? '30%' : '0px', transition: '0.3s'}" ref="leftNode">
<div v-if="play">内容</div>
</div>
<div ref="btnNode" class="btnBox" @click="toggle" :title="play ? '点击收起' : '点击展开'"
:style="{transform: play ? 'rotate(360deg)' : 'rotate(180deg)', left: play ? '30%' : '0px', transition: '0.3s'}"> <img
src="https://i.postimg.cc/c4zMGwGj/sq.png" class="imageBox" /> </div>
</div>
</template>
<script>
export default {
data() {
return {
play: true
};
},
methods: {
toggle() {
this.play = !this.play;
},
},
};
</script>
<style scoped>
.maxBox {
width: 100%;
height: 100%;
background: cornflowerblue;
position: relative;
}
.leftBox {
position: absolute;
height: 100%;
background: cadetblue;
}
.btnBox {
position: absolute;
top: calc(50% - 40px);
cursor: pointer;
z-index: 999;
}
.imageBox {
width: 35px;
height: 80px;
}
</style>
通过 scss 实现
实现效果
源码如下
<template>
<div class="parentBox">
<!-- 弹出内容 -->
<div class="leftSlide" v-show="!hideLeft">
<div class="item">
<h6>2000</h6>
<p>第一行的标题</p>
</div>
<div class="item">
<h6>8463</h6>
<p>第二行的标题</p>
</div>
<div class="item">
<h6>2187</h6>
<p>第三行的标题</p>
</div>
<div class="item">
<h6>4214</h6>
<p>第四行的标题</p>
</div>
<div class="item">
<h6>9824</h6>
<p>第五行的标题</p>
</div>
<div class="item">
<h6>1025</h6>
<p>第六行的标题</p>
</div>
</div>
<!-- 操作按钮 -->
<div class="slideBtn" :class="hideLeft ? 'show' : 'hide'" @click="hideLeft = !hideLeft"></div>
</div>
</template>
<script>
export default {
data() {
return {
hideLeft: true, //是否隐藏 slide
};
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.parentBox {
width: 100%;
height: 100%;
background: rgb(0, 25, 46);
color: #c8c8c8;
// 打开的容器
.leftSlide {
height: 45vh;
width: 10vw;
z-index: 999;
// 自己用的时候换成本地图片
background: url("https://i.postimg.cc/ZnbKZ0s5/bg-map-l.png");
background-size: 100% 100%;
background-color: rgba(11, 26, 62, 0.6);
padding: 1vh 1vw 1vh 2vw;
display: flex;
flex-direction: column;
.item {
height: 7vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
// 点击按钮
.slideBtn {
width: 1.3vw;
height: 5.5vh;
position: absolute;
top: 19.8vh;
z-index: 999;
cursor: pointer;
&.hide {
// 自己用的时候换成本地图片
background: url("https://i.postimg.cc/65TthkDg/sbtn.png");
background-size: 100% 100%;
}
&.show {
// 自己用的时候换成本地图片
background: url("https://i.postimg.cc/zBD9GWN6/sbtn1.png");
background-size: 100% 100%;
}
}
}
</style>