Input/Field 输入框

input

规则

单行输入框

{
    type:"input",
    title:"商品名称",
    field:"goods_name",
    value:"iphone 7",
    props: {
        placeholder: '请输入商品名称',
        disabled: false,
    }
}

多行输入框

{
    type: 'field',
    title: '商品简介',
    field: 'goods_info',
    value: 'iphone info',
    props: {
        placeholder: '请输入商品简介',
        type: 'textarea',
        autosize: true,
    }
}

参考: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 }

Input/Field 输入框 ​

规则 ​

Props ​

Events ​

Input/Field 输入框

规则

Props

Events