介绍
表单中的输入框组件。
引入
代码演示
基础用法
可以通过 `v-model` 双向绑定输入框的值，通过 `placeholder` 设置占位提示文字。
自定义类型
根据 `type` 属性定义不同类型的输入框，默认值为 `text`。
> Tips: digit 类型从 2.4.2 版本开始支持
禁用输入框
通过 `readonly` 将输入框设置为只读状态，通过 `disabled` 将输入框设置为禁用状态。
显示图标
通过 `left-icon` 和 `right-icon` 配置输入框两侧的图标，通过设置 `clearable` 在输入过程中展示清除图标。
错误提示
设置 `required` 属性表示这是一个必填项，可以配合 `error` 或 `error-message` 属性显示对应的错误提示。
插入按钮
通过 button 插槽可以在输入框尾部插入按钮。
格式化输入内容
通过 `formatter` 属性可以对输入的内容进行格式化，通过 `format-trigger` 属性可以指定执行格式化的时机，默认在输入时进行格式化。
高度自适应
对于 textarea，可以通过 `autosize` 属性设置高度自适应。
显示字数统计
设置 `maxlength` 和 `show-word-limit` 属性后会在底部显示字数统计。
输入框内容对齐
通过 `input-align` 属性可以设置输入框内容的对齐方式，可选值为 `center`、`right`。
API
Props
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| v-model (value) | 当前输入的值 | number 、 string | - | |
| label | 输入框左侧文本 | string | - | |
name v2.5.0 | 名称，提交表单的标识符 | string | - | |
| type | 输入框类型, 可选值为 tel digitnumber textarea password 等 | string | text | |
| size | 大小，可选值为 large | string | - | |
| maxlength | 输入的最大字符数 | number 、 string | - | |
| placeholder | 输入框占位提示文字 | string | - | |
| border | 是否显示内边框 | boolean | true | |
| disabled | 是否禁用输入框 | boolean | false | |
| readonly | 是否只读 | boolean | false | |
colon v2.7.2 | 是否在 label 后面添加冒号 | boolean | false | |
| required | 是否显示表单必填星号 | boolean | false | |
| center | 是否使内容垂直居中 | boolean | false | |
| clearable | 是否启用清除图标，点击清除图标后会清空输入框 | boolean | false | |
clear-trigger v2.9.1 | 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示 | string | focus | |
| clickable | 是否开启点击反馈 | boolean | false | |
| is-link | 是否展示右侧箭头并开启点击反馈 | boolean | false | |
| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | boolean | false | |
| show-word-limit | 是否显示字数统计，需要设置maxlength属性 | boolean | false | |
| error | 是否将输入内容标红 | boolean | false | |
| error-message | 底部错误提示文案，为空时不展示 | string | - | |
| formatter | 输入内容格式化函数 | Function | - | |
format-trigger v2.8.7 | 格式化函数触发的时机，可选值为 onBlur | string | onChange | |
| arrow-direction | 箭头方向，可选值为 left up down | string | right | |
| label-class | 左侧文本额外类名 | any | - | |
| label-width | 左侧文本宽度，默认单位为px | number 、 string | 6.2em | |
| label-align | 左侧文本对齐方式，可选值为 center right | string | left | |
| input-align | 输入框对齐方式，可选值为 center right | string | left | |
| error-message-align | 错误提示文案对齐方式，可选值为 center right | string | left | |
| autosize | 是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px | boolean 、 object | false | |
| left-icon | 左侧[图标名称](https://youzan.github.io/vant/v2/#/zh-CN/icon)或图片链接 | string | - | |
| right-icon | 右侧[图标名称](https://youzan.github.io/vant/v2/#/zh-CN/icon)或图片链接 | string | - | |
icon-prefix v2.5.3 | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](https://youzan.github.io/vant/v2/#/zh-CN/icon#props) | string | van-icon | |
rules v2.5.0 | 表单校验规则，详见 [Form 组件](https://youzan.github.io/vant/v2/#/zh-CN/form#rule-shu-ju-jie-gou) | Rule[] | - | |
| autocomplete | input 标签原生的[自动完成属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | string | - |
Events
除下列事件外，Field 默认支持 Input 标签所有的原生事件
| 事件 | 说明 | 回调参数 | |
|---|---|---|---|
| input | 输入框内容变化时触发 | value: string (当前输入的值) | |
| focus | 输入框获得焦点时触发 | event: Event | |
| blur | 输入框失去焦点时触发 | event: Event | |
| clear | 点击清除按钮时触发 | event: Event | |
| click | 点击 Field 时触发 | event: Event | |
click-input v2.8.1 | 点击输入区域时触发 | event: Event | |
| click-left-icon | 点击左侧图标时触发 | event: Event | |
| click-right-icon | 点击右侧图标时触发 | event: Event |
方法
通过 ref 可以获取到 Field 实例并调用实例方法，详见
。
| 方法名 | 说明 | 参数 | 返回值 | |
|---|---|---|---|---|
| focus | 获取输入框焦点 | - | - | |
| blur | 取消输入框焦点 | - | - |
Slots
| 名称 | 说明 | |
|---|---|---|
| label | 自定义输入框 label 标签 | |
| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效。在 Form 组件进行表单校验时，会使用 input 插槽中子组件的 value，而不是 Field 组件的 value。 | |
| left-icon | 自定义输入框头部图标 | |
| right-icon | 自定义输入框尾部图标 | |
| button | 自定义输入框尾部按钮 | |
extra v2.8.2 | 自定义输入框最右侧的额外内容 |
样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考
。
| 名称 | 默认值 | 描述 | |
|---|---|---|---|
| @field-label-width | 6.2em | - | |
| @field-label-color | @gray-7 | - | |
| @field-label-margin-right | @padding-sm | - | |
| @field-input-text-color | @text-color | - | |
| @field-input-error-text-color | @red | - | |
| @field-input-disabled-text-color | @gray-5 | - | |
| @field-placeholder-text-color | @gray-5 | - | |
| @field-icon-size | 16px | - | |
| @field-clear-icon-size | 16px | - | |
| @field-clear-icon-color | @gray-5 | - | |
| @field-right-icon-color | @gray-6 | - | |
| @field-error-message-color | @red | - | |
| @field-error-message-font-size | 12px | - | |
| @field-text-area-min-height | 60px | - | |
| @field-word-limit-color | @gray-7 | - | |
| @field-word-limit-font-size | @font-size-sm | - | |
| @field-word-limit-line-height | 16px | - | |
| @field-disabled-text-color | @gray-5 | - |
常见问题
设置 type 为 number 后，为什么 input 标签的类型仍为 text?
HTML 原生的 `type="number"` 属性在 iOS 和 Android 系统上都存在一定问题，比如 maxlength 属性不生效、无法获取到完整的输入内容等。因此设置 type 为 `number` 时，Field 不会使用原生的 `type="number"` 属性，而是用现代浏览器支持的
来控制输入键盘的类型。
在桌面端点击清除按钮无效？
清除按钮监听是的移动端 Touch 事件，参见
。
效果图：
