Input 输入框
基础表单输入组件,支持多种变体、尺寸、前后缀、清除、密码切换、字数统计等功能。
基础用法
通过 v-model 双向绑定数据:
当前值:
输入框变体
提供 outline、filled、borderless 三种样式变体:
不同尺寸
设置 size 属性使用三种预设尺寸:
带标签与必填
设置 label 显示标签,required 显示必填标记:
错误状态
设置 error 属性显示错误提示:
邮箱格式不正确
前后缀
使用 prefixText/suffixText 属性或 #prefix / #suffix 插槽添加前后缀:
🔍
¥
.com
可清除
设置 clearable 属性,输入框有值时显示清除按钮:
密码输入
设置 type 为 password,右侧显示密码切换按钮:
字数统计
设置 maxlength 和 showCount 显示字数统计:
0/20
0/50
只读与禁用
readonly 只读不可编辑,disabled 禁用且样式变灰:
不同类型
通过 type 属性设置 input 原生类型:
在表单中使用
结合 Card 组件构建完整表单:
用户注册
0/20
+86
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | string | number | '' | 输入值(v-model) |
type | string | 'text' | 输入框原生类型,如 text / number / email / tel / url / password 等 |
variant | 'outline' | 'filled' | 'borderless' | 'outline' | 输入框变体样式 |
size | 'sm' | 'md' | 'lg' | 'md' | 输入框尺寸 |
placeholder | string | '' | 占位文本 |
label | string | '' | 标签文本 |
error | string | '' | 错误提示文本 |
disabled | boolean | false | 是否禁用 |
readonly | boolean | false | 是否只读 |
clearable | boolean | false | 是否可清除 |
maxlength | number | — | 最大输入长度 |
showCount | boolean | false | 是否显示字数统计(需配合 maxlength) |
prefixText | string | '' | 前缀文本 |
suffixText | string | '' | 后缀文本 |
required | boolean | false | 是否显示必填标记 |
autofocus | boolean | false | 是否自动聚焦 |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
update:modelValue | (value: string) => void | 输入值变化时触发 |
focus | (event: FocusEvent) => void | 获得焦点时触发 |
blur | (event: FocusEvent) => void | 失去焦点时触发 |
change | (event: Event) => void | 值改变且失焦时触发 |
clear | () => void | 点击清除按钮时触发 |
keydown | (event: KeyboardEvent) => void | 按键按下时触发 |
keyup | (event: KeyboardEvent) => void | 按键释放时触发 |
keypress | (event: KeyboardEvent) => void | 按键输入时触发 |
Slots
| 插槽名 | 说明 |
|---|---|
prefix | 输入框前缀(优先于 prefixText) |
suffix | 输入框后缀(优先于 suffixText) |
Methods
| 方法名 | 类型 | 说明 |
|---|---|---|
focus | () => void | 使输入框获得焦点 |
blur | () => void | 使输入框失去焦点 |