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

参数类型默认值说明
modelValuestring | number''输入值(v-model)
typestring'text'输入框原生类型,如 text / number / email / tel / url / password 等
variant'outline' | 'filled' | 'borderless''outline'输入框变体样式
size'sm' | 'md' | 'lg''md'输入框尺寸
placeholderstring''占位文本
labelstring''标签文本
errorstring''错误提示文本
disabledbooleanfalse是否禁用
readonlybooleanfalse是否只读
clearablebooleanfalse是否可清除
maxlengthnumber最大输入长度
showCountbooleanfalse是否显示字数统计(需配合 maxlength)
prefixTextstring''前缀文本
suffixTextstring''后缀文本
requiredbooleanfalse是否显示必填标记
autofocusbooleanfalse是否自动聚焦

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使输入框失去焦点