classroom-music-activation/miniprogram/common-components/w-picker/index.ts

// components/w-picker/index.ts
// 组件不支持简单的双向绑定，需要使用input和confirm事件来实现。
Component({
  options: {
    multipleSlots: true,
    styleIsolation: "shared",
  },
  /**
   * 组件的属性列表
   */
  properties: {
    value: {
      type: [String, Number, Array] as any,
      value: "",
      observer: "_value",
    },
    /** 是否显示 */
    show: {
      type: Boolean,
      value: false,
      observer: "_show",
    },
    /**
     * 列数据
     * @example 单列 [{ text: a, value: 1 }, { text: b, value: 2  }]
     * @example 多列 [{ values: [{ text: a, value: 1 }, { text: b, value: 2  }], defaultIndex: 0 }, { values: [{ text: a, value: 1 }, { text: b, value: 2  }], defaultIndex: 0  }]
     */
    columns: {
      type: Array as any,
      value: [],
      observer: "_columns",
    },
    zIndex: {
      type: Number,
      value: 100
    },
    /**
     * 可见的选项个数
     */
    visibleItemCount: {
      type: Number,
      value: 6,
    },
    itemHeight: {
      type: Number,
      value: 46,
    },
    placeholder: {
      type: String,
      value: '请输入搜索关键词'
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    isMulti: false, // 是否多列
    innerShow: false,
    showAfterLeave: false,
    innerValue: "" as any, // 单列时为string, 多列为array
    defaultIndex: 0, // 默认选中的index 单行显示的
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onSubmit(event: any) {
      const detail = event.detail || {};
      if(this.data.isMulti) {
        const values: any = [];
        detail.value.forEach((item: any) => {
          values.push(item.value)
        })
        this.setData({
          show: false,
          value: values,
        });
        this.triggerEvent("confirm", detail);
        this.triggerEvent("input", values);
      } else {
        this.setData({
          show: false,
          value: detail.value.value,
        });
        this.triggerEvent("confirm", detail);
        this.triggerEvent("input", detail.value.value);
      }
    },
    onChange(event: any) {
      const detail = event.detail.value;
      this.triggerEvent("change", detail);
    },
    onClose() {
      this.triggerEvent("cancel");
    },
    onAfterLeave() {
      this.setData({
        showAfterLeave: true,
      });
    },
    onBeforeEnter() {
      this.setData({
        showAfterLeave: false,
      });
    },
    _show() {
      // 单行显示 需要设置默认选中的index
      let defaultIndex = 0;
      let columns = [...this.data.columns];
      if (this.data.show) {
        if (!this.data.isMulti) {
          // 单行显示
          this.data.columns.forEach((item: any, index: number) => {
            if (item.value === this.data.value) {
              defaultIndex = index;
            }
          });
        } else {
          // 多行显示
          columns.forEach((item: any, index: number) => {
            item.values.forEach((value: any, valueIndex: number) => {
              if (value.value === this.data.value[index]) {
                item.defaultIndex = valueIndex;
              }
            });
          });
        }
      }

      this.setData(
        {
          defaultIndex,
          columns,
        },
        () => {
          this.setData({
            innerShow: this.data.show,
          });
        }
      );
    },
    _value() {
      // console.log(this.data, "value");
      this.setData({
        innerValue: this.data.value,
      });
    },
    _columns() {
      // 判断是多行还是单行
      if (this.data.columns[0] && this.data.columns[0].values) {
        this.setData({
          isMulti: true,
        });
      } else {
        this.setData({
          isMulti: false,
        });
      }
    }
  },
});