输入框
通过鼠标或键盘输入数据。
基础用法
禁用状态
可清空
自定义清除图标 2.11.0
格式化
通过 formatter 格式化输入值，通常也需要搭配 parser 使用。
密码框
带图标的输入框
添加一个图标来说明输入类型。
文本域
可调整大小，用于输入多行文本信息。 添加属性 type="textarea" 以将 input 更改为原生的 textarea。
可自适应文本高度的文本域
为文本域类型的输入框设置 autosize 属性，使得文本域的高度能够根据内容自动调整。可以给 autosize 提供一个对象，以指定最小和最大行数。
复合型输入框
在输入框前置或后置一个元素，通常是标签或按钮。
尺寸
长度限制
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| type | 输入框类型，更多信息请参阅 MDN | string | 文本 |
| model-value / v-model | 绑定值 | string / number | — |
| v-model 修饰符 2.11.5 | v-model 修饰符，参考 Vue 修饰符 | object | — |
| 最大长度 | 与原生输入框的 `maxlength` 相同 | string / number | — |
| 最小长度 | 与原生输入框的 `minlength` 相同 | string / number | — |
是否显示输入字数统计，只在 type 为 'text' 或 'textarea' 时有效 | 是否显示输入字数统计，只在 `type` 为 'text' 或 'textarea' 时有效 | boolean | false |
| 字数统计位置 2.11.5 | 字数统计位置，当 `show-word-limit` 为 true 时有效 | 枚举 | "inside" |
| 占位符 | 输入框占位文本 | string | — |
| 可清空 | 是否显示清空按钮，只有当 type 不为 'textarea' 时有效 | boolean | false |
| 清除图标 2.11.0 | 自定义清除图标组件 | string / object | CircleClose |
| 格式化程序 | 指定一个格式化函数，来格式化输入框的展示值。(仅当 `type` 是 'text' 时有效) | Function | — |
| 解析器 | 指定一个解析函数，将格式化的值转为原始值。(仅当 `type` 是 'text' 时有效) | Function | — |
| 显示密码 | 是否显示切换密码图标 | boolean | false |
| disabled | 输入框是否被禁用 | boolean | false |
| size | 输入框尺寸，只在 `type` 不为 'textarea' 时有效 | 枚举 | — |
| 前缀图标 | 前缀图标组件 | string / Component | — |
| 后缀图标 | 后缀图标组件 | string / Component | — |
| 行数 | 输入框行数，只对 `type="textarea"` 有用 | number | 2 |
| 自适应内容高度 | 文本域是否自适应内容高度，只对 `type="textarea"` 有用。可接受一个对象，比如 `{ minRows: 2, maxRows: 6 }` | 布尔值 / 对象 | false |
| 自动补全 | 与原生输入框的 `autocomplete` 相同 | string | off |
| 名称 | 与原生输入框的 `name` 相同 | string | — |
| 只读 | 与原生输入框的 `readonly` 相同 | boolean | false |
| max | 与原生属性 `max` 相同 | — | — |
| min | 与原生属性 `min` 相同 | — | — |
| 步长 | 与原生属性 `step` 相同 | — | — |
| 调整大小 | 控制是否能被用户缩放 | 枚举 | — |
| 自动聚焦 | 与原生输入框的 `autofocus` 相同 | boolean | false |
| 表单 | 与原生属性 `form` 相同 | string | — |
| aria-label a11y 2.7.2 | 与原生输入框的 `aria-label` 相同 | string | — |
| tabindex | 输入框的 tabindex | string / number | — |
| validate-event | 是否触发表单验证 | boolean | true |
| 输入框样式 | input 元素或 textarea 元素的样式 | string / object | {} |
| label a11y 已废弃 | 与原生输入框的 `aria-label` 相同 | string | — |
| 输入模式 2.10.3 | 与原生输入框的 `inputmode` 相同 | string | — |
事件
| 名称 | 描述 | 类型 |
|---|---|---|
| blur | 在 Input 失去焦点时触发 | Function |
| focus | 在 Input 获得焦点时触发 | Function |
| change | 在 Input 失去焦点或用户按下回车时触发，仅当 modelValue 改变时 | Function |
| input | 在 Input 值改变时触发 | Function |
| clear | 在点击清除按钮清空 Input 时触发 | Function |
| 键盘按下 | 在按下按键时触发 | Function |
| 鼠标离开 | 鼠标离开 Input 元素时触发 | Function |
| 鼠标进入 | 鼠标进入 Input 元素时触发 | Function |
| 输入法候选词开始 | 在输入法候选词开始时触发 | Function |
| 输入法候选词更新 | 在输入法候选词更新时触发 | Function |
| 输入法候选词结束 | 在输入法候选词结束时触发 | Function |
插槽
| 名称 | 描述 |
|---|---|
| prefix | 作为 Input 前缀的内容，只在 `type` 不为 'textarea' 时有效 |
| suffix | 作为 Input 后缀的内容，只在 `type` 不为 'textarea' 时有效 |
| prepend | 作为 Input 前置内容，只在 `type` 不为 'textarea' 时有效 |
| append | 作为 Input 后置内容，只在 `type` 不为 'textarea' 时有效 |
暴露
| 名称 | 描述 | 类型 |
|---|---|---|
| blur | 使输入框元素失焦 | Function |
| clear | 清空输入值 | Function |
| focus | 使输入框元素聚焦 | Function |
| input | HTML input 元素 | object |
| ref | HTML 元素，input 或 textarea | object |
| 重置文本域尺寸 | 重置文本域尺寸 | Function |
| select | 选中 input 元素中的文本 | Function |
| 文本域 | HTML textarea 元素 | object |
| 文本域样式 | 文本域的样式 | object |
| 是否正在使用输入法 2.8.0 | 输入框是否正在使用输入法 | object |
常见问题
为什么 ElInput 组件的宽度会被 clearable 撑开？
典型问题： #7287
PS：由于 ElInput 组件没有默认宽度，当显示 clearable 图标时，组件宽度会被撑开，可以通过设置 width 解决。
vue
<el-input v-model="input" clearable style="width: 200px" />来源
贡献者
