html实现隐藏单击向上滑出,vue—实现点击按钮，滑出面板（滑出时下面的元素不会一起下滑）...

用element-ui的collapse折叠面板时，如果面板滑出的时候下面的元素会跟着一起下滑，然后我现在的需求是：希望面板滑出的时候，下面的元素不会跟着下滑，就是这个面板在下面的元素之上。

效果图

先看一下效果图：

折叠面板.gif

实现思路

主要是运用定位来实现面板元素脱离文档流；代码如下：

1、html

因为我要将这个封装成一个组件，所以使用了，这样别人使用这个组件的时候面板里的内容就可以自定义。

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、模板：

...

2、参数说明

:border-show = 'true' // 控制左右两边的边框是否显示；true:显示；false:不显示

... // 里面的内容自定义

*/

Vue.component('collapse-component',{

data: function(){

return {

iconShow: true

}

},

props: ['borderShow'],

template:

'

\

\

\

\

\

\

\

\

\

\

',

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);

}

}

});