Input 输入框

通过鼠标或键盘输入字符。

基础用法

基本的输入框用法。

显示代码

受控和非受控模式

VkInput 组件支持两种使用模式：非受控模式（使用 v-model）和受控模式（使用 :value + 事件）。

非受控模式

使用 v-model 进行双向数据绑定，组件内部管理状态。

当前值:

显示代码

受控模式

使用 :value 单向绑定配合 @input 或 @update:modelValue 事件，由父组件完全控制状态。

当前值:

当前值:

显示代码

禁用状态

通过 disabled 属性指定是否禁用 input 组件。

显示代码

一键清空

使用 clearable 属性即可得到一个可清空的输入框。

显示代码

密码框

使用 show-password 属性即可得到一个可切换显示隐藏的密码框。

显示代码

带图标的输入框

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标。支持 Iconify 图标名称、图片 URL 和本地图片路径。

显示代码

尺寸

使用 size 属性改变输入框大小。除了默认大小外，还有另外两个选项：small、large。

显示代码

复合型输入框

可前置或后置元素，一般为标签或按钮。

Http://

.com

显示代码

API

Props

名称	类型	默认值	说明
modelValue	string	''	绑定值（v-model，非受控模式）
value	string	undefined	输入框的值（受控模式）
type	'text' | 'password' | 'email' | 'number' | 'tel' | 'url'	'text'	输入框类型
size	'small' | 'medium' | 'large'	'medium'	输入框大小
disabled	boolean	false	是否禁用
placeholder	string	'请输入...'	输入框占位文本
maxlength	number | string	—	最大输入长度
clearable	boolean	false	是否可清空
showPassword	boolean	false	是否显示切换密码图标
prefixIcon	string	—	输入框头部图标，支持 Iconify 图标名称（如 mdi:magnify）、图片 URL 或本地图片路径
suffixIcon	string	—	输入框尾部图标，支持 Iconify 图标名称（如 mdi:calendar）、图片 URL 或本地图片路径
readonly	boolean	false	是否只读
customClass	string	—	自定义类名
customStyle	string | object	—	自定义样式
autofocus	boolean	false	是否自动获取焦点

Events

名称	参数	说明
input	(value: string) => void	输入时触发
change	(value: string) => void	值改变时触发
focus	(event: FocusEvent) => void	获取焦点时触发
blur	(event: FocusEvent) => void	失去焦点时触发
clear	() => void	点击清空按钮时触发

Slots

名称	说明
prefix	输入框头部内容
suffix	输入框尾部内容

Methods

名称	说明
focus	使输入框获取焦点
blur	使输入框失去焦点