基础输入框
@beisen-phoenix/input
简介
通过鼠标或键盘输入内容,是最基础的表单域的包装。
API
参数 | 说明 | 类型 | 默认值 | 是否必传 |
---|---|---|---|---|
type | 输入框类型,仅支持 text password hidden |
string | text | 否 |
size | 输入框尺寸,支持 default large small |
string | default | 否 |
value | 输入框内容 | string | - | 否 |
defaultValue | 输入框默认内容,若使用了 value,则 defaultValue 无效 | boolean | - | 否 |
placeholder | 同原生 input | string | 请输入 |
否 |
status | 输入框状态,正常、禁用、提示、错误,支持 normal disabled isHint error |
string | normal | 否 |
readOnly | 只读状态,不能输入,不显示清除按钮 | boolean | false | 否 |
autoFocus | 首次挂载时是否自动获取焦点 | boolean | false | 否 |
preventScrollOnFocus | 自动获取焦点时,是否阻止跳到焦点可视区域,跳动会点起闪屏,因此加此属性 | boolean | false | 否 |
maxLength | 最大输入字符数,同原生 input | number | - | 否 |
prefix | 前缀元素 | React.ReactNode | - | 否 |
suffix | 后缀元素,同 prefix | React.ReactNode | - | 否 |
translation | 国际化,详情见下方 | object | - | 否 |
onChange | 输入框内容变化时的回调 | function(value: string) | - | 否 |
onFocus | 获取焦点时的回调 | function(value: string) | - | 否 |
onBlur | 失去焦点时的回调 | function(value: string,event) | - | 否 |
onEnter | 按下回车的回调 | function(value: string) | - | 否 |
onClear | 按下清除图标的回调 | function() | - | 否 |
onClick | 点击输入框时的回调 | function(event) | - | 否 |
onKeyDown | 键盘按下的回调 | function(event) | - | 否 |
onCompositionStart | 开始新的输入合成时会触发(例如:开始中文输入) | function(event) | - | 否 |
onCompositionUpdate | 在编辑器里的内容改变之前就会触发 | function(event) | - | 否 |
onCompositionEnd | 文本段落的组成完成或取消时触发(例如:中文输入完成) | function(event) | - | 否 |
onCopy | 复制的回调 | function(event) | - | 否 |
onPaste | 粘贴的回调 | function(event) | - | 否 |
onCut | 剪切的回调 | function(event) | - | 否 |
extraCls | 自定义组件容器 class,一般用于覆盖组件默认样式使用 | string | - | 否 |
clearFocus | 输入框激活时 点击清除按钮 输入框是否激活 | boolean | false | 否 |
allowPoprationOnClear | 点击清除按钮时,click 事件是否冒泡 | boolean | false | 否 |
lang | 当前语言环境(zh_CN,en_US,zh_TW) | string | zh_CN | 否 |
showDelete | 是否显示清空图标 | boolean | true | 否 |
autoComplete | 设置自动填充功能 | string | - | 否 |
sizeOfInputAttribute | input自身的size属性 | number | - | 否 |
showValueTooltip | 编辑状态,输入文本超长时,失焦是否显示tooltip | boolean | - | 否 |
相关说明
translation
translation: {
placeholder: '请输入'
}