TextField 输入框
何时使用
- 用于文字类信息输入场景;
组件示例
组件属性
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
addonAfter | 输入框后附加内容 | string | - |
addonBefore | 输入框前附加内容 | string | - |
autoFocus | 是否开启自动聚焦 | boolean | false |
autoHeight | 多行输入框自动高度,当 htmlType 属性为 textarea 时生效 | boolean | false |
behavior | 表单组件显示状态 | 'NORMAL' | |
hasClear | 是否显示清除按钮 | boolean | true |
hasLimitHint | 是否显示计数器 | boolean | false |
htmlType | 设置输入框的类型,input:单行文案、 textarea:多行文案、 password:密码 | 'input' | 'textarea' | 'password' | input |
label | 表单组件标题 | string | - |
labelAlign | 表单组件标题的位置 | 'left' | 'top' | 'top' |
labelColOffset | 设置标题的偏移位置,配置值为栅格值,1代表1/24 | number | 0 |
labelColSpan | 设置标题的占位宽度,配置值为栅格值,1代表1/24 | number | 4 |
labelTextAlign | 表单组件的标题对齐方式 | 'left' | 'right' | 'right' |
labelTipsIcon | 表单组件标题提示信息入口图标,当labelTipsTypes取值为 text 或 render 时生效 | string | - |
labelTipsRender | 表单组件标题提示信息自定义渲染方法,当labelTipsTypes取值为 render 时生效 | (props: IComponentProps) => ReactNode | - |
labelTipsText | 表单组件标题提示文本信息,当labelTipsTypes取值为 text 时生效 | string | - |
labelTipsTypes | 表单组件标题提示信息类型设置 | 'none' | |
maxLength | 设置字数上限 | number | 200 |
onChange | 输入框组件值发生改变时触发的事件 | ({ value: string }) => void | - |
onPressEnter | 输入框按下回车键时触发的事件 | () => void | - |
onScanCodeError | 输入框扫码失败后触发的事件 | (errorMsg: string) => void | - |
onScanCodeSuccess | 输入框扫码成功后触发的事件 | (text: string) => void | - |
placeholder | 占位提示 | string | '请输入' |
rows | 多行输入框高度,当 htmlType 属性为 textarea 时生效 | number | 4 |
scanCode | 是否启用扫码模式(仅钉钉手机端内支持) | ScanCodeConfig | boolean | false |
size | 表单组件尺寸 | 'medium' | |
state | 设置输入框state状态 | 'error' | 'loading' | 'success' | '' | '' |
tips | 表单组件描述信息,展示在控件下方 | string | - |
trim | 是否自动去除头尾空字符 | boolean | false |
validation | 表单组件校验设置,具体使用详见表单校验文档 | [] | |
validationType | 输入框的格式 | 'text' | 'mobile' | 'email' | 'url' | 'chineseID' | 'password' | 'text' |
value | 设置输入框默认值 | string | - |
wrapperColOffset | 设置表单组件的偏移位置,设置值为栅格值,1代表1/24 | number | 0 |
wrapperColSpan | 设置表单组件的占位宽度,设置值为栅格值,1代表1/24 | number | 0 |