介绍
Vue2展开盒子适合放一些静态内容
# 效果预览
- 适合一些固定内容的展开缩放 节省页面空间
# 实现代码
- 因为缩放会遇到高度问题
height: 100%
到height: 0
是没有动画效果的auto
也是 所以我们要通过max-height
设置一个足够的最大高度 收缩的时候设置为0px
- 通过
opacity: 0
+overflow: hidden
实现折叠隐藏效果 - 内容中的
<p>
标签好像有bug 慎用
<template>
<header class="header">
<!-- 内容 -->
<div :class="[isHide ? 'heightNull' : 'height']">
<slot />
</div>
<div class="headerLine">
<div class="headerLineContext" @click="changeZoom">
<!-- 箭头 -->
<div class="arrowSS_style" :style=" `transform: rotate(${rotateArrow}deg);`" />
</div>
</div>
</header>
</template>
<script>
export default {
name: 'ShrinkBox',
props: {
// isHide: {
// type: Boolean,
// default: false
// }
},
data () {
return {
isHide: false,
rotateArrow: -45
}
},
methods: {
changeZoom () {
// 判断是隐藏
if (this.isHide) {
this.rotateArrow = -45
} else {
this.rotateArrow = 135
}
// 取反状态
this.isHide = !this.isHide
// 向外传值 true为隐藏 false为展开
this.$emit('change', this.isHide)
}
}
}
</script>
<style lang="scss" scoped>
$boxpadding: 15px;
$backgroundtext: #fff;
$backgroundLine: #dcdfe6;
// 继承
%transition {
transition: all 0.3s ease-in-out 0.16s;
}
// padding: $boxpadding;
.header {
.headerLine {
position: relative;
display: block;
height: 1px;
width: 100%;
margin: $boxpadding 0;
margin-top: 0px;
background-color: $backgroundLine;
.headerLineContext {
position: absolute;
padding: 0 $boxpadding;
left: 50%;
background-color: $backgroundtext;
transform: translateY(-50%);
cursor: pointer;
}
.arrowSS_style {
@extend %transition;
display: block;
margin: 0 auto;
width: 20px;
height: 20px;
border-right: 2px solid #6ba6c0;
border-top: 2px solid #6ba6c0;
}
}
}
.height {
@extend %transition;
max-height: 2000px; // 尽可能大 不过满足最大高度即可
opacity: 1;
}
.heightNull {
@extend %transition;
max-height: 0;
opacity: 0;
overflow: hidden; // 设置溢出隐藏 防止一些问题
}
</style>