vant/docs/examples-docs/field.md

Field组件

表单中input或textarea的输入框。

基础用法

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

:::demo 基础用法

<zan-cell-group>
  <zan-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username"></zan-field>
  <zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
  <zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
</zan-cell-group>

:::

无label的输入框

不传入label属性即可。

:::demo 无label的输入框

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

:::

带border的输入框

传入一个border属性。

:::demo 带border的输入框

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

:::

禁用的输入框

传入disabled属性即可。

:::demo 禁用的输入框

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

:::

错误的输入框

传入error属性即可。

:::demo 错误的输入框

<zan-cell-group>
  <zan-field label="用户名：" type="text" placeholder="请输入用户名" error></zan-field>
</zan-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]	''