zent
Version:
一套前端设计语言和基于React的实现
78 lines (59 loc) • 5.95 kB
Markdown
---
title: Input
subtitle: 输入框
path: component/input
group: 信息录入
---
矩形的框，支持文本输入
- 在表单输入时使用，可带前缀或后缀。
- 可与其它组件组合使用，如组合成一个搜索输入框
| 参数 | 说明 | 类型 | 默认值 | 备选值 | 是否必填 |
| ------------------ | ----------------------------------------------------------------------- | ---------------- | ---------- | -------------------------------------- | -------- |
| className | 自定义额外类名 | string | | | 否 |
| width | 宽度 | string or number | | | 否 |
| type | 类型 | string | `'text'` | `'number'`、`'password'`、`'textarea'` | 否 |
| inline | 是否行内展示 | bool | `false` | `true` | 否 |
| widthSize | 宽度size(优先级较低，可以通过增加style，className覆盖) | string | `'s'` | `'xs'` \| `'m'` \| `'l'`\| `'xl'` | 否 |
| size | 大小（高度），宽度可以通过 width 控制 | string | `'normal'` | `'large'` \| `'small'` | 否 |
| defaultValue | 默认值 | string | | | 否 |
| value | 输入值 | string | | | 否 |
| readOnly | 是否只读 | bool | `false` | | 否 |
| disabled | 是否禁用 | bool | `false` | | 否 |
| placeholder | 原生 placeholder 文案 | string | `''` | | 否 |
| showClear | 显示清除按钮 | bool | `false` | | 否 |
| addonBefore | 前置标签 | node | | | 否 |
| addonAfter | 后置标签 | node | | | 否 |
| autoFocus | 自动 focus | bool | `false` | | 否 |
| autoSelect | 自动 select | bol | `false` | | 否 |
| initSelectionStart | 初始被选中的第一个字符的位置 | number | | | 否 |
| initSelectionEnd | 初始被选中的最后一个字符的下一个位置。 | number | | | 否 |
| onChange | change 事件回调函数，`e.fromClearButton` 为 `true` 说明事件来自清空按钮 | func(e:Event) | | | 否 |
| onPressEnter | 回车事件 | func(e:Event) | | | 否 |
| icon | 图标 | string | | | 否 |
| iconPostion | 图标位置 | string | `end` | `front` | 否 |
| onIconClick | 图标点击事件 | func(e:Event) | | | 否 |
_除了以上属性外，所有 react 支持的 input 属性，Input 组件都支持_
| 参数 | 说明 | 类型 | 默认值 | 备选值 | 是否必填 |
| ----------------- | ------------ | ------ | ------ | ------ | -------- |
| maxLength | 最大长度 | number | | | 否 |
| showCount | 显示计数 | bool | false | | 否 |
| autoSize | 自动高度 | bool | false | | 否 |
| maxCharacterCount | 校验最大长度 | number | | | 否 |
`focus(): void`
手动聚焦到输入框
`select(): void`
选中输入框内所有内容
`select(selectionStart?: number, selectionEnd?: number): void`
选中区间范围在[selectionStart, selectionEnd]里的内容
<style>
.zent-input-wrapper {
width: 240px;
margin-bottom: 20px;
}
</style>