wxlitian/miniprogram/components/dropmenu/dropmenu-item.ts

// components/dropmenu/dropmenu.ts
Component<
  {
    label: string
    value: string
    show: boolean
  },
  {
    options: ComponentPropertyArrayType
    defaultValue: ComponentPropertyStringType
  },
  {
    onShowClick(e: WechatMiniprogram.BaseEvent): void
    onOptionClick(e: WechatMiniprogram.BaseEvent): void
    setShow(e: boolean): void
  },
  {
    parent: CustomComponent
    currentActive: number
  }
>({
  relations: {
    './dropmenu': {
      type: 'parent',
      linked(parent: CustomComponent) {
        this.parent = parent
      },
    },
  },
  options: {
    addGlobalClass: true,
    multipleSlots: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    options: {
      type: Array,
      value: [],
    },
    defaultValue: {
      type: String,
      value: '',
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    label: '',
    value: '',
    show: false,
  },

  observers: {
    'options, defaultValue': function (options: WxOptionStringDto[], defaultValue) {
      this.setData({
        label: options.find((o) => o.value === defaultValue)?.label,
        value: defaultValue,
      })
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    setShow(state: boolean) {
      console.log('hit show')
      if (state !== this.data.show) {
        this.setData({
          show: state,
        })
      }
    },
    onShowClick() {
      if (this.parent) {
        const idx = this.parent.children.indexOf(this)
        this.parent.updateChildren(this.data.show ? -1 : idx)

        if(idx > -1) {
          console.log(this)
        }
      }
    },
    onOptionClick(e: WechatMiniprogram.BaseEvent<{}, { value: string; label: string }>) {
      const { value, label } = e.currentTarget.dataset
      this.setData({
        show: false,
        value,
        label,
      })
      this.triggerEvent('change', { label, value })
    },
  },
})