Field 输入框

介绍

表单中的输入框组件,支持inputtextarea两种类型

引入

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

代码演示

基础用法

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

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

自定义类型

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

  1. <van-cell-group>
  2. <van-field
  3. v-model="username"
  4. required
  5. clearable
  6. label="用户名"
  7. right-icon="question-o"
  8. placeholder="请输入用户名"
  9. @click-right-icon="$toast('question')"
  10. />
  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 插槽可以在输入框尾部插入按钮

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

API

Props

Field 默认支持 Input 标签所有的原生属性,比如 maxlengthplaceholderautofocus

参数说明类型默认值版本
label输入框左侧文本String--
value当前输入的值String | Number--
type可设置为原生类型, 如 numberteltextareaStringtext-
size大小,可选值为 largeString-1.6.9
border是否显示内边框Booleantrue-
disabled是否禁用输入框Booleanfalse-
readonly是否只读Booleanfalse-
required是否显示表单必填星号Booleanfalse-
clearable是否启用清除控件Booleanfalse1.1.9
clickable是否开启点击反馈Booleanfalse2.0.0
is-link是否展示右侧箭头并开启点击反馈Booleanfalse1.1.10
error是否将输入内容标红Booleanfalse-
error-message底部错误提示文案,为空时不展示String''-
label-class左侧文本额外类名any-2.0.0
label-width左侧文本宽度,可指定单位,默认为 pxString | Number90px1.6.17
label-align左侧文本对齐方式,可选值为 centerrightStringleft1.1.10
input-align输入框内容对齐方式,可选值为 centerrightStringleft1.1.10
error-message-align错误提示文案对齐方式,可选值为 centerrightStringleft1.6.11
autosize自适应内容高度,只对 textarea 有效,可传入对象,如 { maxHeight: 100, minHeight: 50 },单位为 pxBoolean | Objectfalse1.0.0
left-icon输入框左侧图标名称或图片链接,可选值见 Icon 组件String-1.5.7
right-icon输入框尾部图标名称或图片链接,可选值见 Icon 组件String-1.5.7

Events

Field 默认支持 Input 标签所有的原生事件,如 focusblurkeypress

事件说明回调参数
input输入框内容变化时触发-
click点击时触发-
clear点击清除按钮后触发-
click-left-icon点击头部图标时触发-
click-right-icon点击尾部图标时触发-

方法

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

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

Slots

名称说明
label自定义输入框标签
input自定义输入框,使用此插槽后,与输入框相关的属性和事件将失效
left-icon自定义输入框头部图标
right-icon自定义输入框尾部图标
button自定义输入框尾部按钮

Field 输入框 - 图1