TuInput 输入框
受控 value + placeholder / type / disabled / readonly / maxlength / clearable / size,双端事件归一化。
受控输入框:value 由父级维护,输入 / 变更 / 聚焦 / 失焦 / 回车通过同名自定义事件回传。双端差异已封装:Web 从 e.target.value 取值,小程序从 e.detail.value 取值,方法内统一归一化后 emit。
属性
| 名称 | 类型 | 说明 |
|---|---|---|
value | string | 输入值(受控),默认空串。 |
placeholder | string | 占位文案。 |
type | text | password | number | 输入类型,默认 text;小程序端 number 对应数字键盘。 |
disabled | boolean | 禁用。 |
readonly | boolean | 只读(小程序端映射为 disabled,避免可编辑)。 |
maxlength | number | 最大长度,不传则不限。 |
clearable | boolean | 可一键清空:有值时显示 × 按钮,点击回传空串。 |
size | small | medium | large | 尺寸,默认 medium。 |
事件:input / change(回传字符串值)、focus / blur、confirm(回车)。点击清空按钮触发 input 并回传空串。
×
当前值「TransOne」· 8 字符 —— 输入触发 input 事件回传,value 由父级维护。
实例
ts
createComponent({
component: TuInput,
props: { value: this.state.keyword, placeholder: '搜索', clearable: true },
emitters: { input: (v: string) => (this.state.keyword = v) },
})