Vue ElementUI el-collapse 改造：手风琴

最新推荐文章于 2024-07-31 14:10:48 发布

AvatarGiser

最新推荐文章于 2024-07-31 14:10:48 发布

阅读量3.6k

点赞数 3

分类专栏：《ElementUI 基础知识》

本文链接：https://blog.csdn.net/sinat_31213021/article/details/111273619

版权

《ElementUI 基础知识》专栏收录该内容

36 篇文章 7 订阅

订阅专栏

一、背景

项目需要，手风琴高度要占满整个页面的高度，并随页面窗口变化而变化。

二、源码

<template>
    <div class="collapse-page">
        <el-collapse class="collapse-div tree-collapse" accordion v-model="activeName">
            <el-collapse-item ref="clooapseItem" v-for="(item, i) of collapseList" :name="i.toString()" :key="i" :title="collapseList[i]" >
                <!-- 自定义内容 -->
                <!-- <h1 v-for="row of 100" :name="row" :key="row">{{row}}</h1> -->
            </el-collapse-item>            
        </el-collapse>
    </div>
</template>
<script>

export default {
    data() {
        return {
            // 默认打开的面板
            activeName: '0',
            // 树名
            collapseList: [
                '手风琴 01',
                '手风琴 02',
                '手风琴 03',
                '手风琴 04',
                '手风琴 05'
            ]
        }
    },
    methods: {
        
    },
    mounted() {
        // 初始化
        handlerDiv(this.collapseList);

        //窗口变化时
        window.addEventListener('resize', () => {
            handlerDiv(this.collapseList);
        });

        /**
         * 重置高度
         * @param list 折叠列表
         */
        function handlerDiv(list) {
            let maxHeight = document.documentElement.clientHeight - (50 * list.length) + 'px';
            let classList = document.getElementsByClassName('el-collapse-item__content');
            for (let i = 0, len = classList.length; i < len; i++) {
                classList[i].style.height = maxHeight;
            }
        }
    }
}
</script>

<style lang="stylus">
.collapse-page {
    background:#ccc;
    overflow:hidden;
    .collapse-div {
        width: 250px;
        .el-icon-arrow-right {
            transform: rotate(180deg);
        }
        .el-icon-arrow-right:before {
            content: url('../assets/images/expand.png');
        }
        // 标题
        .el-collapse-item__header {
            padding-left: 5px;
            background: rgb(230,235,241);
            border-bottom: solid white 1px;
            font-weight: bolder;
        }
        // 选中
        .is-active {
            background: rgb(197, 227,255);
            transform: rotate(0deg);
        }
        .el-collapse-item__wrap {
            overflow: auto;
        }
        .el-collapse-item__content {
            padding-bottom: 0;
            // background: rgb(246, 246, 246);
        } 
    }
}
</style>