12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- import { VantComponent } from '../common/component';
- const nextTick = () => new Promise((resolve) => setTimeout(resolve, 20));
- 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() {
- this.updateExpanded()
- .then(nextTick)
- .then(() => {
- const data = { transition: true };
- if (this.data.expanded) {
- data.contentHeight = 'auto';
- }
- this.setData(data);
- });
- },
- methods: {
- updateExpanded() {
- if (!this.parent) {
- return Promise.resolve();
- }
- const { value, accordion } = this.parent.data;
- const { children = [] } = this.parent;
- const { name } = this.data;
- const index = children.indexOf(this);
- const currentName = name == null ? index : name;
- const expanded = accordion
- ? value === currentName
- : (value || []).some((name) => name === currentName);
- const stack = [];
- if (expanded !== this.data.expanded) {
- stack.push(this.updateStyle(expanded));
- }
- stack.push(this.set({ index, expanded }));
- return Promise.all(stack);
- },
- updateStyle(expanded) {
- return this.getRect('.van-collapse-item__content')
- .then((rect) => rect.height)
- .then((height) => {
- if (expanded) {
- return this.set({
- contentHeight: height ? `${height}px` : 'auto',
- });
- }
- return this.set({ contentHeight: `${height}px` })
- .then(nextTick)
- .then(() => this.set({ contentHeight: 0 }));
- });
- },
- onClick() {
- if (this.data.disabled) {
- return;
- }
- const { name, expanded } = this.data;
- const index = this.parent.children.indexOf(this);
- const currentName = name == null ? index : name;
- this.parent.switch(currentName, !expanded);
- },
- onTransitionEnd() {
- if (this.data.expanded) {
- this.setData({
- contentHeight: 'auto',
- });
- }
- },
- },
- });
|