vant/docs/examples-docs/field.md

<style> .demo-field { .van-field-wrapper { padding: 0 10px; } } </style> <script> export default { data() { return { username: 'zhangmin' }; }, methods: { onIconClick() { this.username = ''; }, onFieldBlur() { console.log('blured'); } } }; </script>

Field 输入框

表单中input或textarea的输入框。

使用指南

import { Field } from 'vant';

Vue.component(Field.name, Field);

代码演示

基础用法

根据type属性显示不同的输入框。

:::demo 基础用法

<van-cell-group>
  <van-field
    type="text"
    label="用户名："
    placeholder="请输入用户名"
    v-model="username"
    icon="clear"
    :on-icon-click="onIconClick"
    @blur="onFieldBlur"
    required></van-field>
  <van-field
    type="password"
    label="密码："
    placeholder="请输入密码"
    required>
    <template slot="icon">
      <van-icon name="search"></van-icon>
    </template>
  </van-field>
  <van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
</van-cell-group>

:::

无label的输入框

不传入label属性即可。

:::demo 无label的输入框

<van-cell-group>
  <van-field type="text" placeholder="请输入用户名"></van-field>
</van-cell-group>

:::

带border的输入框

传入一个border属性。

:::demo 带border的输入框

<div class="van-field-wrapper">
  <van-field type="text" placeholder="请输入用户名" border></van-field>
</div>

:::

禁用的输入框

传入disabled属性即可。

:::demo 禁用的输入框

<van-cell-group>
  <van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
</van-cell-group>

:::

错误的输入框

传入error属性即可。

:::demo 错误的输入框

<van-cell-group>
  <van-field label="用户名：" type="text" placeholder="请输入用户名" error></van-field>
</van-cell-group>

:::

Autosize的输入框(仅支持textarea)

传入autosize属性, 且将rows设为1。

:::demo 错误的输入框

<van-cell-group>
  <van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></van-field>
</van-cell-group>

:::

API

参数	说明	类型	默认值	可选值
type	输入框类型	String	text	text, number, email, url, tel, date, datetime, password, textarea
placeholder	输入框placeholder	String
value	输入框的值	String
label	输入框标签	String
disabled	是否禁用输入框	Boolean	false
error	输入框是否有错误	Boolean	false
readonly	输入框是否只读	Boolean	false
maxlength	输入框maxlength	String, Number
rows	textarea rows	String, Number
cols	textarea cols	String, Number
autosize	自动调整高度(仅支持textarea)	Boolean	false	true, false
icon	输入框尾部图标	String		icon中支持的类型
onIconClick	点击图标的回调函数	Function

Slot

name	描述
icon	自定义icon