Input/Field 输入框

规则

基础示例

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

Props 配置示例

单行输入框（text）

const rule = {
    type:"input",
    title:"用户名",
    field:"username",
    props: {
        placeholder: '请输入用户名',
        clearable: true,
        leftIcon: 'user-o',
    }
}

多行输入框（textarea）

const rule = {
    type: 'field',
    title: '商品简介',
    field: 'goods_info',
    value: '',
    props: {
        placeholder: '请输入商品简介',
        type: 'textarea',
        autosize: true,
        rows: 4,
    }
}

密码输入框（password）

const rule = {
    type:"input",
    title:"密码",
    field:"password",
    props: {
        type: 'password',
        placeholder: '请输入密码',
        clearable: true,
    }
}

数字输入框（number/digit）

const rule = {
    type:"input",
    title:"手机号",
    field:"phone",
    props: {
        type: 'digit',
        placeholder: '请输入手机号',
        maxlength: 11,
        clearable: true,
    }
}

可清空输入框

const rule = {
    type:"input",
    title:"搜索关键词",
    field:"keyword",
    props: {
        placeholder: '请输入搜索关键词',
        clearable: true,
        clearTrigger: 'always',
        leftIcon: 'search',
    }
}

显示字数统计

const rule = {
    type: 'field',
    title: '商品描述',
    field: 'description',
    props: {
        type: 'textarea',
        placeholder: '请输入商品描述',
        maxlength: 200,
        showWordLimit: true,
    }
}

禁用和只读

const rule = {
    type:"input",
    title:"订单号",
    field:"order_no",
    value:"ORD20240101001",
    props: {
        disabled: true,
        // 或使用 readonly: true,
    }
}

Events 事件示例

监听输入变化和焦点事件

const rule = {
    type:"input",
    title:"搜索关键词",
    field:"keyword",
    props: {
        placeholder: '请输入搜索关键词',
        clearable: true,
    },
    on: {
        input: (value) => {
            console.log('输入值改变:', value);
        },
        blur: (event) => {
            console.log('失去焦点:', event);
        },
        focus: (event) => {
            console.log('获得焦点:', event);
        },
        clear: (event) => {
            console.log('清空输入');
        },
    },
}

实时搜索（input 事件）

const rule = {
    type:"input",
    title:"搜索商品",
    field:"keyword",
    props: {
        placeholder: '请输入商品名称搜索',
        clearable: true,
        leftIcon: 'search',
    },
    inject: true,
    on: {
        input: ($inject, value) => {
            // 实时搜索：输入时自动触发搜索
            if (value && value.length >= 2) {
                // 调用搜索接口
                searchProducts(value).then(res => {
                    // 更新搜索结果
                    $inject.api.setValue('searchResults', res.data);
                });
            }
        },
    },
}

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

const rule = [
    {
        type:"input",
        title:"商品名称",
        field:"goods_name",
        props: {
            placeholder: '请输入商品名称',
        },
        inject: true,
        on: {
            input: ($inject, value) => {
                // 当商品名称改变时，自动生成商品编码
                if (value) {
                    const code = 'GD' + value.substring(0, 3).toUpperCase() + Date.now().toString().slice(-6);
                    $inject.api.setValue('goods_code', code);
                }
            },
        },
    },
    {
        type:"input",
        title:"商品编码",
        field:"goods_code",
        props: {
            disabled: 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 }