Field 输入框

input或textarea的输入框。

使用指南

  1. import { Field } from 'vant';
  3. Vue.use(Field);

代码演示

基础用法

通过 v-model 绑定输入框的值

  1. <van-cell-group>
  2.   <van-field v-model="value" placeholder="请输入用户名" />
  3. </van-cell-group>

自定义类型

根据type属性定义不同类型的输入框

  1. <van-cell-group>
  2.   <van-field
  3.     v-model="username"
  4.     label="用户名"
  5.     icon="clear"
  6.     placeholder="请输入用户名"
  7.     required
  8.     @click-icon="username = ''"
  9.   />
  11.   <van-field
  12.     v-model="password"
  13.     type="password"
  14.     label="密码"
  15.     placeholder="请输入密码"
  16.     required
  17.   />
  18. </van-cell-group>

禁用输入框

  1. <van-cell-group>
  2.   <van-field
  3.     value="输入框已禁用"
  4.     label="用户名"
  5.     left-icon="contact"
  6.     disabled
  7.   />
  8. </van-cell-group>

错误提示

通过error或者error-message属性增加对应的错误提示

  1. <van-cell-group>
  2.   <van-field
  3.     v-model="username"
  4.     label="用户名"
  5.     placeholder="请输入用户名"
  6.     error
  7.   />
  8.   <van-field
  9.     v-model="phone"
  10.     label="手机号"
  11.     placeholder="请输入手机号"
  12.     error-message="手机号格式错误"
  13.   />
  14. </van-cell-group>

高度自适应

对于 textarea，可以通过autosize属性设置高度自适应

  1. <van-cell-group>
  2.   <van-field
  3.     v-model="message"
  4.     label="留言"
  5.     type="textarea"
  6.     placeholder="请输入留言"
  7.     rows="1"
  8.     autosize
  9.   />
  10. </van-cell-group>

插入按钮

通过 button slot 可以在输入框尾部插入按钮

  1. <van-cell-group>
  2.   <van-field
  3.     center
  4.     v-model="sms"
  5.     label="短信验证码"
  6.     placeholder="请输入短信验证码"
  7.     icon="clear"
  8.     @click-icon="sms = ''"
  9.   >
  10.     <van-button slot="button" size="small" type="primary">发送验证码</van-button>
  11.   </van-field>
  12. </van-cell-group>

API

Field 默认支持 Input 标签所有的原生属性，比如 maxlength、placeholder、readonly、autofocus 等

参数 说明 类型 默认值
label 标签 String -
value 当前输入的值 String Number -
type 可设置为任意原生类型, 如 number tel textarea String text
disabled 是否禁用输入框 Boolean false
error 是否将输入内容标红 Boolean false
error-message 底部错误提示文案 String ''
autosize 自适应内容高度，只对 textarea 有效，可传入对象，如 { maxHeight: 100, minHeight: 50 }，单位为 px Boolean Object false
icon 输入框尾部图标 (可选值见 Icon 组件) String -
left-icon 输入框左侧图标 (可选值见 Icon 组件) String -

Event

Field 默认支持 Input 标签所有的原生事件，如 focus、blur、keypress 等

事件 说明 回调参数
click-icon 点击尾部图标时触发 -

方法

通过 ref 可以获取到 field 实例并调用实例方法

方法名 参数 返回值 介绍
blur - - 取消输入框焦点

Slot

名称 说明
label 自定义输入框标签
icon 自定义输入框尾部图标
button 自定义输入框尾部按钮

原文:

https://youzan.github.io/vant/#/zh-CN/field