Appearance
Input 输入框
通过鼠标或键盘输入字符。
基础用法
禁用状态
一键清空
使用 clearable 属性即可得到一个可清空的输入框。
密码框
使用 show-password 属性即可得到一个可切换显示隐藏的密码框。
带图标的输入框
带有图标标记输入类型。
文本域
用于输入多行文本信息，通过将 type 属性的值指定为 textarea。
可自适应文本高度的文本域
通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整。
复合型输入框
可前置或后置元素，一般为标签或按钮。
尺寸
输入长度限制
maxlength 和 minlength 是原生属性，用来限制输入框的字符长度。其中字符长度是用 UTF-16 代码单元测量的。
Input 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | string / number | — |
| type | 类型 | string | text |
| size | 输入框尺寸，只在 type!="textarea" 时有效 | 'large' / 'default' / 'small' | default |
| placeholder | 输入框占位文本 | string | — |
| disabled | 是否禁用 | boolean | false |
| readonly | 原生 readonly 属性，是否只读 | boolean | false |
| clearable | 是否可清空 | boolean | false |
| show-password | 是否显示切换密码图标 | boolean | false |
| prefix-icon | 输入框头部图标 | string / Component | — |
| suffix-icon | 输入框尾部图标 | string / Component | — |
| rows | 输入框行数，只对 type="textarea" 有效 | number | 2 |
| autosize | 自适应内容高度，只对 type="textarea" 有效 | boolean / object | false |
| maxlength | 原生属性，最大输入长度 | number | — |
| minlength | 原生属性，最小输入长度 | number | — |
| show-word-limit | 是否显示统计字数 | boolean | false |
Input 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| input | 在 Input 值改变时触发 | (value: string |
| change | 仅在输入框失去焦点或用户按下回车时触发 | (value: string |
| focus | 在 Input 获得焦点时触发 | (event: Event) |
| blur | 在 Input 失去焦点时触发 | (event: Event) |
| clear | 在点击由 clearable 属性生成的清空按钮时触发 | — |
Input 插槽
| 插槽名 | 说明 |
|---|---|
| prefix | 输入框头部内容，只对 type="text" 有效 |
| suffix | 输入框尾部内容，只对 type="text" 有效 |
| prepend | 输入框前置内容，只对 type="text" 有效 |
| append | 输入框后置内容，只对 type="text" 有效 |