<template>
    <div class="catalogue">
        <div class="box" ref="box" :style="boxHeight">
            <div class="cont" ref="cont">
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </div>
        </div>
        <div class="btn" @click="more = !more" :class="more ? 'active' : ''">
            {{ more ? '隐藏' : '查看更多' }}<i class="el-icon-arrow-down"></i>
            <div class="shadow"></div>
        </div>
    </div>
</template>

<script>
/**  @description:目录管理  **/
export default {
    name: 'catalogue',
    components: {},
    data: () => ({
        more: false,
        contHeight: 0,
    }),
    computed: {
        boxHeight() {
            return {
                height: this.more ? this.contHeight + 'px' : '200px',
            };
        },
    },
    mounted() {
        this.contHeight = this.$refs.cont.offsetHeight;
    },
};
</script>
<style lang="less" scoped>
.box {
    height: 200px;
    border: 1px solid #000;
    overflow: hidden;
    transition: all 0.2s ease;
    .cont {
        li {
            height: 50px;
        }
    }
}
.btn {
    height: 50px;
    text-align: center;
    line-height: 50px;
    border: 1px solid #000;
    border-top: 0;
    position: relative;
    i.el-icon-arrow-down {
        transition: all 0.2s ease;
        margin-left: @space2;
    }
    .shadow {
        height: 90px;
        width: 100%;
        position: absolute;
        top: -91px;
        background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    }
    &.active {
        .shadow {
            display: none;
        }
        i.el-icon-arrow-down {
            transform: rotate(180deg);
        }
    }
}
</style>

效果图：