vant/docs/examples/field.md

<script> export default { data() { return { name: '' }; }, methods: { handleChange() { console.log(this.name); } } }; </script>

Field组件

表单中input或textarea的输入框。

基础用法

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

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

:::

无label的输入框

:::demo 不传入label属性即可。

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

:::

监听change事件

:::demo 监听组件的change事件。

<z-cell-group>
  <z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
</z-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
readonly	输入框是否只读	boolean	false
maxlength	输入框maxlength	[String, Number]	''