vue—实现点击按钮，滑出面板（滑出时下面的元素不会一起下滑）

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

效果图

先看一下效果图：

实现思路

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

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