wx-mini-weview/components/collapse/collapse.js

weixin UI

const { WvInheritable } = require('../../behaviors/WvInheritable');
const { WvComponentEvent } = require('../../behaviors/WvComponentEvent');

Component({
  options: {
    styleIsolation: 'apply-shared',
    multipleSlots: true 
  },

  relations: {
    '../collapse-item/collapse-item': {
      type: 'child',
      linked(target) {
        this._updateChildrenStatus();
				this.linkChildNode('collapseItems', target);
      },
      linkChanged() {
        this._updateChildrenStatus();
      },
      unlinked(target) {
        this._updateChildrenStatus();
				this.unlinkChildNode('collapseItems', target);
      }
    }
  },

  behaviors: [
		WvInheritable({
			properties: {
        activeNames: {
          type: null,
          value: [],
          observer: '_updateChildrenStatus'
        },
        accordion: {
          type: Boolean,
          value: false
        },
        gap: {
          type: String,
          value: null
        }
      },
			childrenProperties: {
        collapseItems: {
          split: {
            type: Boolean,
            value: true
          },
          disabled: {
            type: Boolean,
            value: false
          },
          arrowPosition: {
            type: String,
            value: 'right'
          },
          showArrow: {
            type: Boolean,
            value: true
          },
          headerClass: {
            type: String,
            value: ''
          },
          headerClass: {
            type: String,
            value: ''
          },
          contentClass: {
            type: String,
            value: ''
          },
          reverse: {
            type: Boolean,
            value: false
          },
          // 新增背景色属性
          headerBackground: {
            type: String,
            value: 'rgba(var(--wv-color-light-rgb), 1)'
          },
          contentBackground: {
            type: String,
            value: 'rgba(var(--wv-color-light-rgb), 1)'
          }, 
          duration:{
            type: String,
            value: '300ms'
          }
        }
      }
    })
  ], 

  properties: {
  },

  methods: {
    _updateChildrenStatus() {
      const children = this.getChildrenNodes('collapseItems');
      if (!children || !children.length) return;
      
      const activeNames = this.data.wvInheritableApply.activeNames;
      
      const activeNamesArray = Array.isArray(activeNames) ? 
                               activeNames : 
                               (activeNames !== undefined && activeNames !== null ? [activeNames] : []);
      
      children.forEach((child) => {
        const name = child.data.wvInheritableApply.name;
        const isActive = activeNamesArray.includes(name);
        child.updateStatus(isActive);
      });
    },
    
    toggleItem(name) {
      if (!name) return;
      
      const activeNames = this.data.wvInheritableApply.activeNames;
      const accordion = this.data.wvInheritableApply.accordion;
      console.log(accordion)
      
      const isArray = Array.isArray(activeNames);
      const currentActiveNames = isArray ? 
                                activeNames : 
                                (activeNames !== undefined && activeNames !== null ? [activeNames] : []);
      
      let newActiveNames;
      
      if (accordion) {
        newActiveNames = currentActiveNames.includes(name) ? [] : [name];
      } else {
        newActiveNames = [...currentActiveNames];
        const index = newActiveNames.indexOf(name);
        
        if (index > -1) {
          newActiveNames.splice(index, 1);
        } else {
          newActiveNames.push(name);
        }
      }
      
      const finalValue = isArray ? newActiveNames : 
                        (accordion && newActiveNames.length > 0 ? newActiveNames[0] : 
                         (accordion ? '' : newActiveNames));
      
      this.setData({ activeNames: finalValue });
      
      this.triggerEvent('change', {
        activeNames: newActiveNames,
        currentName: name,
        expanded: newActiveNames.includes(name)
      });
    }
  }
});