用element-ui的collapse折叠面板时，如果面板滑出的时候下面的元素会跟着一起下滑，然后我现在的需求是：希望面板滑出的时候，下面的元素不会跟着下滑，就是这个面板在下面的元素之上。
效果图
先看一下效果图：
折叠面板.gif
实现思路
主要是运用定位来实现面板元素脱离文档流；代码如下：
1、html
因为我要将这个封装成一个组件，所以使用了<slot></slot>，这样别人使用这个组件的时候面板里的内容就可以自定义。
<div class="collapse-wrap" :class="{'show-border-top': !iconShow}">
<div class="collapse-down" @click="funTransitionHeightIn(600)" v-show="iconShow">
<div class="collapse-down-icon el-icon-caret-bottom"></div>
</div>
<div ref="collapse" class="collapse-content-wrap">
<div class="collapse-content">
<slot></slot>
</div>
</div>
<div class="collapse-down" @click="funTransitionHeightOut(600)" v-show="!iconShow">
<div class="collapse-down-icon el-icon-caret-top"></div>
</div>
</div>
2、css
.collapse-wrap{
position: absolute;
width: 100%;
border-bottom: 1px solid #ebeef5;
z-index: 1001;
box-sizing: border-box;
}
.collapse-wrap .collapse-down {
position: absolute;
bottom: -17.5px;
left: 50%;
margin-left: -17.5px;
background-color: #fff;
width: 35px;
height: 35px;
border-radius: 20px;
cursor: pointer;
transition: .3s;
box-shadow: 0 0 6px rgba(0,0,0,.12);
z-index: 1000;
}
.collapse-wrap .collapse-down-icon {
color: #409eff;
display: block;
line-height: 35px;
text-align: center;
font-size: 18px;
}
.collapse-wrap .collapse-content-wrap {
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background-color: #fff;
height: 0;
overflow: hidden;
}
.collapse-wrap .collapse-content-wrap .collapse-content{
padding: 10px;
}
.show-border-top {
border-top: 1px solid #ebeef5;
}
.show-border-side {
border-right: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
}
3、封装成组件
当你们要使用的时候，直接引用collapse-component.js，然后调用就可以了。里面的根据高度自适应写动画借鉴的是张鑫旭的代码。
collapse-component.js 内容：
/**
* ---组件--不挤掉下面元素的折叠面板
1、模板：
<collapse-component :border-show = 'true'>
<template>
...
</template>
</collapse-component>
2、参数说明
:border-show = 'true' // 控制左右两边的边框是否显示；true:显示；false:不显示
<template>
... // 里面的内容自定义
</template>
*/
Vue.component('collapse-component',{
data: function(){
return {
iconShow: true
}
},
props: ['borderShow'],
template:
'<div class="collapse-wrap" :class="{\'show-border-top\': !iconShow,\'show-border-side\': borderShow}">\
<div class="collapse-down" @click="funTransitionHeightIn(600)" v-show="iconShow">\
<div class="collapse-down-icon el-icon-caret-bottom"></div>\
</div>\
<div ref="collapse" class="collapse-content-wrap">\
<div class="collapse-content">\
<slot></slot>\
</div>\
</div>\
<div class="collapse-down" @click="funTransitionHeightOut(600)" v-show="!iconShow">\
<div class="collapse-down-icon el-icon-caret-top"></div>\
</div>\
</div>',
methods:{
// 显示
funTransitionHeightIn : function(time) { // time, 数值，可缺省
if (typeof window.getComputedStyle == "undefined") return;
this.iconShow = false;
element = this.$refs.collapse;
var height = window.getComputedStyle(element).height;
element.style.transition = "none"; // mac Safari下，貌似auto也会触发transition, 故要none下~
element.style.height = "auto";
var targetHeight = window.getComputedStyle(element).height;
element.style.height = height;
element.offsetWidth = element.offsetWidth;
if (time) element.style.transition = "height "+ time +"ms";
element.style.height = targetHeight;
},
// 折叠
funTransitionHeightOut : function(time) { // time, 数值，可缺省
if (typeof window.getComputedStyle == "undefined") return;
height = window.getComputedStyle(element).height;
element.style.transition = "none"; // mac Safari下，貌似auto也会触发transition, 故要none下~
targetHeight = "0px";
element.style.height = height;
element.offsetWidth = element.offsetWidth;
if (time) element.style.transition = "height "+ time +"ms";
element.style.height = targetHeight;
var _this = this;
window.setTimeout(function(){
_this.iconShow = true;
},time);
}
}
});
