Input 输入框
通过键盘输入文本的基础表单控件:支持前后置图标与插槽、密码框、字数统计、textarea 多行与高度自适应,内置 error / help 校验提示(error 变化时抖动提醒)。在 eb-form 中使用时,input / blur 时机自动触发所在表单项校验。
基础用法
clearable 默认开启:输入非空时右侧出现清空按钮(禁用 / 只读态不显示),点击后清空绑定值、触发 clear 事件并自动回焦输入框。
尺寸
size 支持 large / small(缺省为默认高度),用于与页面控件密度对齐;位于 eb-form 内时会继承表单尺寸上下文。
禁用与只读
disabled 整体禁用并置灰;readonly 保留外观与焦点但内容不可修改,适合展示系统回填、不允许改动的值。
密码框
show-password 时输入内容以密文显示,右侧出现明文 / 密文切换图标(有内容时才展示),用于密码、密钥等敏感信息输入。
前置 / 后置内容
prefix-icon / suffix-icon 传入图标名即可渲染前后置图标(也支持图标组件);需要放置文本、单位等任意内容时使用 #prefix / #suffix 插槽。
输入长度与字数统计
maxlength 限制最大输入长度(原生截断);显式开启 show-word-limit 后在右侧展示当前长度 / 上限计数,超限(粘贴等场景)呈红色告警,多行文本域同样支持。
文本域与高度自适应
type="textarea" 渲染多行输入,rows 指定初始行数(默认 2);autosize 开启后高度随内容自适应,传 { minRows, maxRows } 约束自适应区间,适合内容长度不可预期的评论、描述类输入。
校验提示
help 在输入框下方展示灰色辅助说明;error 优先级更高并呈红色,error 文案变化时输入框抖动提醒,重新输入后自动清除错误态。两者也常由 eb-form 校验结果驱动。
API
Input Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | string | number | |
| type | 类型,textarea 渲染多行文本域,其余透传为原生 type(如 password) | string | text |
| size | 尺寸,支持 large / small | string | |
| placeholder | 占位文本 | string | |
| disabled | 禁用(同时响应表单禁用态) | boolean | false |
| readonly | 只读,可聚焦但不可修改 | boolean | false |
| clearable | 可清空,有内容时展示清空按钮 | boolean | true |
| show-password | 密码框,展示明文 / 密文切换按钮 | boolean | false |
| prefix-icon | 前置图标(图标名或组件) | string | component | — |
| suffix-icon | 后置图标(图标名或组件) | string | component | — |
| maxlength | 最大输入长度(原生截断) | number | — |
| show-word-limit | 展示字数统计,需配合 maxlength | boolean | false |
| rows | textarea 初始行数 | number | 2 |
| autosize | textarea 高度自适应,传对象 { minRows, maxRows } 约束区间 | boolean | object | false |
| error | 错误提示文案(红色,优先于 help,变化时抖动) | string | |
| help | 辅助说明文案 | string | |
| name | 原生 name 属性 | string | — |
| autocomplete | 原生 autocomplete 属性 | string | off |
| validate-event | 是否在 input / blur 时触发表单项校验 | boolean | true |
| ripple | 激活涟漪动效开关:聚焦时实体色影向内收拢消散;也可在 Form 上批量关闭或全局 setRipple(false) | boolean | true |
Input Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| update:modelValue | 输入时同步绑定值 | (value: string) => void | — |
| input | 原生 input 事件,每次键入触发 | (value: string) => void | — |
| change | 原生 change 事件,失焦或回车且值变化时触发 | (value: string) => void | — |
| focus | 聚焦 | (e: FocusEvent) => void | — |
| blur | 失焦,并触发表单项 blur 校验 | (e: FocusEvent) => void | — |
| clear | 点击清空按钮(同时清空绑定值并回焦) | () => void | — |
| keydown | 原生 keydown 事件 | (e: KeyboardEvent) => void | — |
Input Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| prefix | 输入框前置内容,与 prefix-icon 共存 | — | — |
| suffix | 输入框后置内容,与 suffix-icon / 清空按钮共存 | — | — |
Input Methods
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| focus | 使输入框聚焦 | () => void | — |
| blur | 使输入框失焦 | () => void | — |
| select | 选中文本框全部内容 | () => void | — |
| ref | 内部原生 input / textarea 元素引用 | HTMLInputElement | HTMLTextAreaElement | — |