vue+elementui 实现列表搜索条件折叠展开，封装成组件

列表页时常出现因搜索条件过多，占用屏幕的位置太多，所以将不常用到的搜索条件折叠起来，用户需要可以展开。记录一下这个组件。

使用

引入该组件后，将需要折叠展开的dom包含在该组件中即可。

完整代码

  <template>
    <div class="list-filter-panel">
        <transition name="slide-fade">
            <div v-show="isOpen"><slot></slot></div>
        </transition>
        <el-button type="text" style="margin-left:13px;" @click="foldHandle">{{fText}}</el-button>
    </div>
</template>

<script>
    export default {
        name: '',
        data(){
            return {
                isOpen:false,
                fText:'更多搜索'
            }
        },
        methods: {
            foldHandle(){
                this.isOpen = !this.isOpen;
                this.fText = this.isOpen?'收起':'更多搜索'
            }
        },
    }
</script>

<style scoped>
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to{
        transform: translateY(5px);
        opacity: 0;
    }
    .list-filter-panel{
        padding-bottom:10px;
        margin-top:-10px;
    }
</style>