vant/docs/examples-docs/field.md

Field 输入框

表单中input或textarea的输入框。

基础用法

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

:::demo 基础用法

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

:::

Autosize的输入框(仅支持textarea)

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

:::demo 错误的输入框

<zan-cell-group>
  <zan-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></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
rows	textarea rows	string, number
cols	textarea cols	string, number
autosize	自动调整高度(仅支持textarea)	boolean	false	true, false