Component({ options: { // multipleSlots: true, // 在组件定义时的选项中启用多slot支持 }, /** * 组件的属性列表 */ properties: { width: { type: String, value: '', // 按钮宽度 }, placeholder: { type: String, value: '请输入文字', }, value: { type: String, value: '', // 输入框的值(支持外部控制) }, }, /** * 组件的初始数据 */ data: { innerValue: '', // 内部维护的输入值 }, observers: { // 监听外部传入的 value 变化 value(newVal: string) { this.setData({ innerValue: newVal }); }, }, lifetimes: { attached() { // 初始化时同步外部传入的 value this.setData({ innerValue: this.properties.value || '' }); }, }, /** * 组件的方法列表 */ methods: { onInput(e: WechatMiniprogram.Input) { let { value } = e.detail; value = value.replace(/\s/g, ''); this.setData({ innerValue: value }); }, onConfirm() { const value = this.data.innerValue; // 触发确认事件(即使值为空也触发,让父组件处理清空逻辑) this.triggerEvent('onConfirm', { value }); }, // onTap() { // this.triggerEvent('onTap', { words: (this as any).words }); // }, }, });