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

// components/w-field/index.ts
Component({
  options: {
    multipleSlots: true,
    styleIsolation: "shared"
  },
  /**
   * 组件的属性列表
   */
  properties: {
    value: {
      type: String,
      value: '',
      observer: '_value'
    },
    label: {
      type: String,
      value: '标题'
    },
    /** 是否显示内边框 */
    border: {
      type: Boolean,
      value: true,
    },
    /** 是否禁用输入框 */
    disabled: {
      type: Boolean,
      value: false,
    },
    /** 是否只读 */
    readonly: {
      type: Boolean,
      value: false,
    },
    /** 是否居中 */
    center: {
      type: Boolean,
      value: false,
    },
    /** 是否启用清除控件 */
    clearable: {
      type: Boolean,
      value: false,
    },
    /** 是否开启点击反馈 */
    clickable: {
      type: Boolean,
      value: false,
    },
    /** 是否展示右侧箭头并开启点击反馈 */
    isLink: {
      type: Boolean,
      value: false,
    },
    /**
     * 输入框内容对齐方式，可选值为 center right, 默认 left
     */
    inputAlign: {
      type: String,
      value: 'left'
    },
    /** 标题宽度 默认5.2em */
    titleWidth: {
      type: String,
      value: '5.2em'
    },
    /**
     * 可设置为任意原生类型, 如 number idcard textarea digit nickname, 默认 text
     */
    type: {
      type: String,
      value: 'text'
    },
    /** 请输入占位符 */
    placeholder: {
      type: String,
      value: '请输入内容'
    },
    /** 指定 placeholder 的样式 */
    placeholderStyle: {
      type: String,
      value: ''
    },
    /** 是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px */
    autosize: {
      type: [Object, Boolean] as any,
      value: false
    },
    /** 最大输入长度，设置为 -1 的时候不限制最大长度 */
    maxlength: {
      type: Number,
      value: -1
    },
    /** 是否显示字数统计，需要设置maxlength属性 */
    showWordLimit: {
      type: Boolean,
      value: false
    },
    /**
     * 左侧文本对齐方式，可选值为 top, 默认 left
     */
    labelAlign: {
      type: String,
      value: 'left'
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    innerValue: ''
  },
  lifetimes: {
    attached() {
      //
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 值变化事件
    onChange(event: { detail: any }) {
      const value = event.detail || '';
      this.triggerEvent('change', value)
    },
    // 失焦事件
    onBlur(event: { detail: any }) {
      const value = event.detail || '';
      this.triggerEvent('blur', value)
    },
    onInput(event: { detail: any }) {
      const value = event.detail || '';
      this.setData({
        value: value
      })
      this.triggerEvent('input', value)
    },
    _value() {
      this.setData({
        innerValue: this.data.value
      })
    }
  }
})