vue编写折叠面板组件

vue编写折叠面板组件

• 创建collapse.vue组件中
• 利用组件之间传讯 + css样式 实现一个简单的折叠面板

    <ul class="collapse">
      <li class="item" v-for="(item, index) in collList" :key="index">
        <p @click="open(index)">
          <img src="/static/svg/tbm.svg" alt="" />
          <span>{{ item.name }}</span>
        </p>
        <div class="Content" ref="liCol">
            <p>我是测试内容</p>
        </div>
      </li>
    </ul>

• 接收父组件传递过来的值，监听传递过来值的变化，然后在渲染

    export default {
        components: {},
        props: ["collLists"],
        data() {
            return {
                liColHeight: 0, // 折叠面板内容初始高度
                collList: this.collLists,
            };
        },
        methods: {
            // 项目折叠面板动画效果实现
            open(i) {
                const liCol = this.$refs.liCol[i];
                let height = liCol.offsetHeight; //获取要展开元素的高度
                if (height === this.liColHeight) {
                    // 展开
                    liCol.style.height = "auto";
                    height = liCol.offsetHeight;
                    liCol.style.height = this.liColHeight + "px";

                    let f = document.body.offsetHeight; // 必加
                    liCol.style.height = height + "px";
                } else {
                    // 收缩
                    liCol.style.height = this.liColHeight + "px";
                }
            },
        },
        watch: {
            /* 监听传的值 */
            collLists(newval, oldval) {
                /* 将变化的新值，赋予到要渲染的值 */
                this.collList = newval;
            }
        },
    };

对样式进行调整

    .collapse {
        .item {
            .Content {
                height: 0px;
                overflow: hidden;
                transition: height 0.3s;
            }
        }
    }