vue实现展开收起

需求示例

前端界面中存在展开收起功能，dome高度超过100px，前端展示展开收起功能。收起->100px，展开->自适应高度；dome高度小于100px，不展示操作按钮。dome高度存在动态变化的可能

<template>
    <div class="content">
        <div class="info-box" v-for="(item, index) in list" :key="index" :class="{'min-box':!item.expend}">
            <p ref="info-container" :data-id="item.id">{{item.label}}</p>
        </div>
        <div class="more-btn" v-if="moreState[item.id]" :key="index" @click="changeExpend(id)">
            {{item.expend ? "收起" : "展开"}}
            <i :class="item.expend ? 'icon-up' : 'icon-down'"></i>
        </div>
    </div>
</template>
<script>
    export default {
        name:"",
        components:{},
        props:{
            list:{
                required:true,
                type:Array
            }
        },
        data(){
            return {
                moreState:{}
            }
        },
        mounted(){
            this.handleUnfold();
        },
        updated(){
            this.handleUnfold();
        },
        methods:{
            handleUnfold(){
                this.$refs["info-container"] && this.$refs["info-container"].forEach(item=>{
                    if(item.scrollHeight && item.attributes && item.attributes["data-id"] && item.attributes["data-id"].value){
                        this.$set(this.moreState, item.attributes["data-id"].value, item.scrollHeight > 100)
                    }
                })
            },
            changeExpend(id){
                this.list = this.list.map(item=>{
                    if(item.id === id){
                        item.expend = !item.expend;
                    }
                    return item;
                })
            }
        }
    }
</script>
<style scoped lang="less">
    .info-box{
        &.min-box{
            max-height: 100px;
            overflow: hidden;
        }
    }
</style>

• 首次渲染完成进入钩子mounted，对dome高度进行判断，并修改moreState，调用vue函数this.$forceUpdate()更新dome，并保存原始状态orginState
• 界面存在更新，导致dome高度变化触发钩子updated，对dome高度判断，并修改moreState，与原本保存的orginState进行比对（避免重复触发updated），若存在变化则moreState赋值orginState，调用函数this.$forceUpdate()更新dome
• 该示例用于vue2.0+；vue3.0+无需手动触发更新， 当moreState改变时，vue3.0将直接触发dome渲染