ruo-shan-cloud-pharmacy/miniprogram/components/collapse/collapse.ts

// components/collapse/collapse.ts
export { }
Component({
    properties: {
        title: {
            type: String,
            value: ''
        },
        titleStyle: {
            type: String,
            value: ''
        },
        defaultOpen: {
            type: Boolean,
            value: false
        },
        disableOpen: {
            type: Boolean,
            value: false
        },
        offsetHeight: {
            type: Number,
            value: 0
        }
    },

    data: {
        open: false,
        contentHeight: 0
    },

    lifetimes: {
        ready(this: WechatMiniprogram.Component.TrivialInstance) {
            this.setData({ open: this.data.defaultOpen })
            this.calcHeight()
        }
    },

    methods: {
        toggle(this: WechatMiniprogram.Component.TrivialInstance) {
            if (this.data.disableOpen) return;

            const open = !this.data.open;
            this.setData({ open }, () => {
                if (open) {
                    // 等展开后再算高度
                    this.calcHeight();
                }
            });
        },

        calcHeight(this: WechatMiniprogram.Component.TrivialInstance) {
            const query = this.createSelectorQuery()
            query.select('#content').boundingClientRect()
            query.exec(res => {
                if (res && res[0]) {
                    this.setData({
                        contentHeight: res[0].height
                    })
                }
            })
        }
    }
})