zx_bms_uni/miniprogram_npm/@vant/weapp/collapse-item/index.vue

<template>
    <view :class="'van-collapse-item custom-class ' + (index !== 0 ? 'van-hairline--top' : '')">
        <van-cell
            :title="title"
            title-class="title-class"
            :icon="icon"
            :value="value"
            :label="label"
            :is-link="isLink"
            :clickable="clickable"
            :border="border && expanded"
            :class="utils.bem('collapse-item__title', { disabled, expanded })"
            right-icon-class="van-cell__right-icon"
            custom-class="van-cell"
            hover-class="van-cell--hover"
            @click="onClick"
        >
            <slot name="title" slot="title" />
            <slot name="icon" slot="icon" />
            <slot name="value" />
            <slot name="right-icon" slot="right-icon" />
        </van-cell>
        <view :class="utils.bem('collapse-item__wrapper', { transition })" :style="'height: ' + contentHeight + ';'" @transitionend="onTransitionEnd">
            <view class="van-collapse-item__content content-class">
                <slot />
            </view>
        </view>
    </view>
</template>
<script module="utils" lang="wxs" src="@/miniprogram_npm/@vant/weapp/wxs/utils.wxs"></script>
<script>
'use strict';
Object.defineProperty(exports, '__esModule', {
    value: true
});
var component_1 = require('../common/component');
var nextTick = function () {
    return new Promise(function (resolve) {
        return setTimeout(resolve, 20);
    });
};
component_1.VantComponent({
    classes: ['title-class', 'content-class'],
    relation: {
        name: 'collapse',
        type: 'ancestor',
        current: 'collapse-item'
    },
    props: {
        name: null,
        title: null,
        value: null,
        icon: String,
        label: String,
        disabled: Boolean,
        clickable: Boolean,
        border: {
            type: Boolean,
            value: true
        },
        isLink: {
            type: Boolean,
            value: true
        }
    },
    data: {
        contentHeight: 0,
        expanded: false,
        transition: false
    },
    mounted: function () {
        var that = this;
        this.updateExpanded()
            .then(nextTick)
            .then(function () {
                var data = {
                    transition: true
                };
                if (that.expanded) {
                    data.contentHeight = 'auto';
                }
                that.setData(data);
            });
    },
    methods: {
        updateExpanded: function () {
            if (!this.parent) {
                return Promise.resolve();
            }
            var _a = this.parent.data;
            var value = _a.value;
            var accordion = _a.accordion;
            var _b = this.parent.children;
            var children = _b === void 0 ? [] : _b;
            var name = this.name;
            var index = children.indexOf(this);
            var currentName = name == null ? index : name;
            var expanded = accordion
                ? value === currentName
                : (value || []).some(function (name) {
                      return name === currentName;
                  });
            var stack = [];
            if (expanded !== this.expanded) {
                stack.push(this.updateStyle(expanded));
            }
            stack.push(
                this.set({
                    index: index,
                    expanded: expanded
                })
            );
            return Promise.all(stack);
        },
        updateStyle: function (expanded) {
            var that = this;
            return this.getRect('.van-collapse-item__content')
                .then(function (rect) {
                    return rect.height;
                })
                .then(function (height) {
                    if (expanded) {
                        return that.set({
                            contentHeight: height ? height + 'px' : 'auto'
                        });
                    }
                    return that
                        .set({
                            contentHeight: height + 'px'
                        })
                        .then(nextTick)
                        .then(function () {
                            return that.set({
                                contentHeight: 0
                            });
                        });
                });
        },
        onClick: function () {
            if (this.disabled) {
                return;
            }
            var _a = this;
            var name = _a.name;
            var expanded = _a.expanded;
            var index = this.parent.children.indexOf(this);
            var currentName = name == null ? index : name;
            this.parent.switch(currentName, !expanded);
        },
        onTransitionEnd: function () {
            if (this.expanded) {
                this.setData({
                    contentHeight: 'auto'
                });
            }
        }
    }
});
</script>
<style>
@import './index.css';
</style>