Input 输入框
代码演示
API
Input Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| autofocus | 原生属性，自动获取焦点 | Boolean | true, false | false | |
| autocomplete | 是否使用浏览器的记忆功能自动填充文本 | String | — | on / off | |
| clearable | 是否可以被清空 | Boolean | — | false | |
| disabled | 禁用输入框 | Boolean | — | false | |
| is-center | 文字是否居中对齐(默认为左对齐) | Boolean | — | false | |
| label | 输入框关联的label文字 | String | — | — | v2.0.0 |
| maxlength | 最大输入长度 | Number | — | — | |
| minlength | 最小输入长度 | Number | — | — | |
| max | 原生属性，设置最大值 | — | — | — | |
| min | 原生属性，设置最小值 | — | — | — | |
| name | 原生属性 | String | — | — | |
| placeholder | 输入框的占位文本 | String | — | — | |
| pre-append | 复合输入框中头部前缀类型 | String | text | — | v2.0.0 |
| prefix-icon | 输入框首部图标, 值为通用字体图标的className | String | — | — | |
| readonly | 原生属性，是否只读 | Boolean | — | — | |
| rows | 行数(type为textarea时有效) | Number | — | — | |
| resize | 是否允许文本域拖动操作(仅当type为textarea时生效) | String | 'none' | 'both' | 'horizontal' | 'vertical' | — | |
| suf-append | 复合输入框中尾部后缀类型 | String | 'text' | 'button' | — | v2.0.0 |
| size | 输入框尺寸 | String | 'large' | 'medium' | 'small' | 'mini' | 'medium' | |
| show-counter | 是否显示计数(当且仅当showCounter为true, 同时设置了maxlength时有效) | Boolean | — | false | |
| show-word-limit | * 同show-counter | Boolean | — | false | v2.0.0 |
| show-password | 是否显示切换密码模式图标 | Boolean | — | false | v2.0.0 |
| suffix-icon | 输入框尾部图标, 值为通用字体图标的className | String | — | — | |
| type | 类型 | String | 'text' | 'textarea' | 'password' 等其他原生type可选值 | 'text' | |
| tabindex | 输入框的tabindex | String | — | — | v2.0.0 |
| value / v-model | 绑定值 | String / Number | — | — | |
| validate-event | 输入时是否触发表单的校验 | Boolean | — | — | |
| autosize | 自适应高度的文本域(textarea), 可以传入 boolean 也可以传入对象，如：{minRows: 2, maxRows: 4} | Boolean | Object | — | false | v2.0.0 |
Input-Suggestion Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| autocompelete | 是否使用浏览器的记忆功能自动填充文本 | String | — | on / off | |
| clearable | 是否可以被清空 | Boolean | — | false | |
| disabled | 禁用输入框 | Boolean | — | false | |
| empty-placeholder | 下拉无数据占位文本 | String | — | — | |
| fetch-suggestion-list | 返回推荐列表的方法, 使用cb([])来返回 | Function | — | (query, cb) | |
| fetch-suggestions | * 同fetch-suggestion-list | Function | — | (query, cb) | v2.0.0 |
| hide-loading | 是否隐藏远程加载时的加载图标 | Boolean | — | false | v2.0.0 |
| is-center | 文字是否居中对齐(默认为左对齐) | Boolean | — | false | |
是否为聚焦展开下拉(已在v2.0.0被废弃, 被trigger-on-focus代替) | Boolean | — | true | ||
| label | 输入框关联的label文字 | String | — | — | v2.0.0 |
| maxlength | 最大输入长度 | Number | — | — | |
| minlength | 最小输入长度 | Number | — | — | |
| min-popper-height | 最小下拉面板高度 | String | '75px' | — | v1.7.16 |
| name | 原生属性 | String | — | — | |
| placeholder | 输入框占位文本 | String | — | — | |
| placement | 下拉框气泡出现的位置(同popover参数) | String | — | — | |
| prefix-icon | 输入框首部图标, 值为通用字体图标的className | String | — | — | |
| popper-class | 为下拉列表添加class | String | — | — | |
| popper-append-to-body | 下拉框气泡是否插入至body | Boolean | true | v2.0.0 | |
| readonly | 是否只读 | Boolean | — | — | |
| size | 输入框尺寸 | String | 'large' | 'medium' | 'small' | 'mini' | 'medium' | |
| suffix-icon | 输入框尾部图标, 值为通用字体图标的className | String | — | — | |
| select-when-unmatched | 在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件 | Boolean | — | false | v2.0.0 |
| trigger-on-focus | 是否为聚焦展开下拉 | Boolean | — | true | 2.0.0 |
| value / v-model | 绑定值 | String | — | — | |
| value-key | 被选中项的属性名, 用于填充input | String | — | value |
Input Methods
| 参数 | 说明 | 回调参数 | Version |
|---|---|---|---|
| blur | 使 input 获取焦点 | — | |
| focus | 使 input 失去焦点 | — | |
| select | 选中 input 中的文字 | — | v2.0.0 |
Input Events
| 参数 | 说明 | 回调参数 | Version |
|---|---|---|---|
| blur | input失去焦点时触发 | — | |
| change | input失去焦点或在focus状态按下回车键时触发 | — | |
| clear | 点击清除按钮清空input值时触发 | — | |
| focus | input取得焦点时触发 | — | |
| input | 输入发生变化时即刻触发 | — | |
| sufAppendClick | 尾部按钮被点击时触发(仅在复合输入框, 且sufAppendIsButton = true时生效) | — |
Input-suggestion Events
| 参数 | 说明 | 回调参数 | Version |
|---|---|---|---|
| clear | 点击清除按钮清空input值时触发 | — | |
| select | 点选下拉某一项时触发 | 当前选中的项 |
Input-suggestion Slots
| 参数 | 说明 | Version |
|---|---|---|
| popper-header | 下拉框头部插槽 | v2.0.0 |
| popper-footer | 下拉框底部插槽 | v2.0.0 |
贡献者
| 类型 | 参与者 |
|---|---|
| 设计者 | UED视觉组 |
| 维护者 | UED前端组 |