项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
双端兼容 · 桌面 + 移动

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 后在右侧展示当前长度 / 上限计数,超限(粘贴等场景)呈红色告警,多行文本域同样支持。

17 / 10
17 / 30

文本域与高度自适应 ​

type="textarea" 渲染多行输入,rows 指定初始行数(默认 2);autosize 开启后高度随内容自适应,传 { minRows, maxRows } 约束自适应区间,适合内容长度不可预期的评论、描述类输入。

校验提示 ​

help 在输入框下方展示灰色辅助说明;error 优先级更高并呈红色,error 文案变化时输入框抖动提醒,重新输入后自动清除错误态。两者也常由 eb-form 校验结果驱动。

长度 4 - 16 位,支持字母与数字
该用户名已被占用

API ​

Input Props

参数说明类型默认值
v-model绑定值string | number
type类型,textarea 渲染多行文本域,其余透传为原生 type(如 password)stringtext
size尺寸,支持 large / smallstring
placeholder占位文本string
disabled禁用(同时响应表单禁用态)booleanfalse
readonly只读,可聚焦但不可修改booleanfalse
clearable可清空,有内容时展示清空按钮booleantrue
show-password密码框,展示明文 / 密文切换按钮booleanfalse
prefix-icon前置图标(图标名或组件)string | component—
suffix-icon后置图标(图标名或组件)string | component—
maxlength最大输入长度(原生截断)number—
show-word-limit展示字数统计,需配合 maxlengthbooleanfalse
rowstextarea 初始行数number2
autosizetextarea 高度自适应,传对象 { minRows, maxRows } 约束区间boolean | objectfalse
error错误提示文案(红色,优先于 help,变化时抖动)string
help辅助说明文案string
name原生 name 属性string—
autocomplete原生 autocomplete 属性stringoff
validate-event是否在 input / blur 时触发表单项校验booleantrue
ripple激活涟漪动效开关:聚焦时实体色影向内收拢消散;也可在 Form 上批量关闭或全局 setRipple(false)booleantrue

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—