Input/Field 输入框

规则

基础示例

Props 配置示例

单行输入框（text）

多行输入框（textarea）

密码输入框（password）

数字输入框（number/digit）

可清空输入框

显示字数统计

形态对比（禁用 / 只读 / 大号）

Events 事件示例

监听输入变化和焦点事件

实时搜索（input 事件，模拟接口）

联动更新其他字段（input 事件）

完整配置项:Vant_Input

value :String

Props

参数	说明	类型	默认值
v-model	当前输入的值	number | string	-
label	输入框左侧文本	string	-
name	名称，作为提交表单时的标识符	string	-
id	输入框 id，同时会设置 label 的 for 属性	string	van-field-n-input
type	输入框类型, 支持原生 input 标签的所有 type 属性，额外支持了 digit 类型	FieldType	text
size	大小，可选值为 large normal	string	-
maxlength	输入的最大字符数	number | string	-
placeholder	输入框占位提示文字	string	-
border	是否显示内边框	boolean	true
disabled	是否禁用输入框	boolean	false
readonly	是否为只读状态，只读状态下无法输入内容	boolean	false
colon	是否在 label 后面添加冒号	boolean	false
required	是否显示表单必填星号	boolean | 'auto'	null
center	是否使内容垂直居中	boolean	false
clearable	是否启用清除图标，点击清除图标后会清空输入框	boolean	false
clear-icon	清除图标名称或图片链接，等同于 Icon 组件的 name 属性	string	clear
clear-trigger	显示清除图标的时机，always 表示输入框不为空时展示， focus 表示输入框聚焦且不为空时展示	FieldClearTrigger	focus
clickable	是否开启点击反馈	boolean	false
is-link	是否展示右侧箭头并开启点击反馈	boolean	false
autofocus	是否自动聚焦，iOS 系统不支持该属性	boolean	false
show-word-limit	是否显示字数统计，需要设置 maxlength 属性	boolean	false
error	是否将输入内容标红	boolean	false
error-message	底部错误提示文案，为空时不展示	string	-
error-message-align	错误提示文案对齐方式，可选值为 center right	FieldTextAlign	left
formatter	输入内容格式化函数	(val: string) => string	-
format-trigger	格式化函数触发的时机，可选值为 onBlur	FieldFormatTrigger	onChange
arrow-direction	箭头方向，可选值为 left up down	string	right
label-class	左侧文本额外类名	string | Array | object	-
label-width	左侧文本宽度，默认单位为 px	number | string	6.2em
label-align	左侧文本对齐方式，可选值为 center right top	FieldTextAlign	left
input-align	输入框对齐方式，可选值为 center right	FieldTextAlign	left
autosize	是否自适应内容高度，只对 textarea 有效， 可传入对象,如 { maxHeight: 100, minHeight: 50 }， 单位为px	boolean | FieldAutosizeConfig	false
left-icon	左侧图标名称或图片链接，等同于 Icon 组件的 name 属性	string	-
right-icon	右侧图标名称或图片链接，等同于 Icon 组件的 name 属性	string	-
icon-prefix	图标类名前缀，等同于 Icon 组件的 class-prefix 属性	string	van-icon

Events

事件名	说明	回调参数
focus	输入框获得焦点时触发	event: Event
blur	输入框失去焦点时触发	event: Event
clear	点击清除按钮时触发	event: MouseEvent
click	点击组件时触发	event: MouseEvent
clickInput	点击输入区域时触发	event: MouseEvent
clickLeftIcon	点击左侧图标时触发	event: MouseEvent
clickRightIcon	点击右侧图标时触发	event: MouseEvent
startValidate	开始表单校验时触发	-
endValidate	结束表单校验时触发	{ status: string, message: string }