用element-ui的collapse折疊面板時(shí)吻商，如果面板滑出的時(shí)候下面的元素會(huì)跟著一起下滑糟红，然后我現(xiàn)在的需求是：希望面板滑出的時(shí)候，下面的元素不會(huì)跟著下滑柒爸，就是這個(gè)面板在下面的元素之上捎稚。
效果圖
先看一下效果圖：
折疊面板.gif
實(shí)現(xiàn)思路
主要是運(yùn)用定位來(lái)實(shí)現(xiàn)面板元素脫離文檔流今野；代碼如下：
1、html
因?yàn)槲乙獙⑦@個(gè)封裝成一個(gè)組件条霜，所以使用了<slot></slot>宰睡，這樣別人使用這個(gè)組件的時(shí)候面板里的內(nèi)容就可以自定義气筋。
<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搀矫、封裝成組件
當(dāng)你們要使用的時(shí)候，直接引用collapse-component.js采够，然后調(diào)用就可以了冰垄。里面的根據(jù)高度自適應(yīng)寫動(dòng)畫借鑒的是張?chǎng)涡?/a>的代碼。
collapse-component.js 內(nèi)容：
/**
* ---組件--不擠掉下面元素的折疊面板
1逝薪、模板：
<collapse-component :border-show = 'true'>
<template>
...
</template>
</collapse-component>
2董济、參數(shù)說(shuō)明
:border-show = 'true' // 控制左右兩邊的邊框是否顯示要门；true:顯示；false:不顯示
<template>
... // 里面的內(nèi)容自定義
</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, 數(shù)值封豪，可缺省
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也會(huì)觸發(fā)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, 數(shù)值炒瘟，可缺省
if (typeof window.getComputedStyle == "undefined") return;
height = window.getComputedStyle(element).height;
element.style.transition = "none"; // mac Safari下吹埠，貌似auto也會(huì)觸發(fā)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);
}
}
});
