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

weixin UI

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

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

  relations: {
    '../collapse/collapse': {
      type: 'parent',
      linked(target) {
        this.linkParentNode('collapse', target);
      },
      unlinked() {
        this.unlinkParentNode('collapse');
      }
    }
  },

  behaviors: [
    WvInheritable({
      properties: {
        name: {
          type: null,
          value: ''
        },
        split: {
          type: Boolean,
          value: true
        },
        disabled: {
          type: Boolean,
          value: false
        },
        isActive: {
          type: Boolean,
          value: false,
          observer(newVal) {
            if (newVal) {
              this._calculateContentHeight();
            }
          }
        },
        arrowPosition: {
          type: String,
          value: 'right'
        },
        showArrow: {
          type: Boolean,
          value: true
        },
        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: {},

  data: {
    contentHeight: 0
  },

  lifetimes: {
    attached() {
      this._ensureHasName();
    },
    
    ready() {
      this._calculateContentHeight();
    }
  },

  methods: {
    // 确保组件有name属性
    _ensureHasName() {
      if (!this.data.wvInheritableApply.name && this.data.wvInheritableApply.name !== 0) {
        // 生成随机名称，避免使用this.id
        const randomName = 'collapse_' + Math.random().toString(36).substring(2, 10);
        this.setData({
          name: randomName
        });
      }
    },
    
    _calculateContentHeight() {
      const that = this
      const query = this.createSelectorQuery().in(this);
      query.select('.wv-collapse-item-content-inner').boundingClientRect();
      query.exec(res => {
        if (res && res[0]) {
          that.setData({
            contentHeight: res[0].height
          });
        }
      });
    },

    onClickHeader() {
      if (this.data.wvInheritableApply.disabled) return;
      
      const parent = this.getParentNode('collapse');
      if (parent) {
        parent.toggleItem(this.data.wvInheritableApply.name);
      }
    },

    updateStatus(isActive) {
      if (this.data.wvInheritableApply.isActive !== isActive) {
        this.setData({
          isActive
        });
      }
    }
  }
});