Field 输入框

引入

基础用法

可以通过 双向绑定输入框的值，通过 placeholder 设置占位提示文字。

  1. <!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为容器来提供外边框。 -->
  2. <van-cell-group>
  3.   <van-field v-model="value" label="文本" placeholder="请输入用户名" />
  4. </van-cell-group>
  1. export default {
  2.   data() {
  3.     return {
  4.       value: '',
  5.     };
  6.   },
  7. };

自定义类型

根据 type 属性定义不同类型的输入框，默认值为 text。

  1. <!-- 输入任意文本 -->
  2. <van-field v-model="text" label="文本" />
  3. <!-- 输入手机号，调起手机号键盘 -->
  4. <van-field v-model="tel" type="tel" label="手机号" />
  5. <!-- 允许输入正整数，调起纯数字键盘 -->
  6. <van-field v-model="digit" type="digit" label="整数" />
  7. <!-- 允许输入数字，调起带符号的纯数字键盘 -->
  8. <van-field v-model="number" type="number" label="数字" />
  9. <!-- 输入密码 -->
  10. <van-field v-model="password" type="password" label="密码" />
  1. export default {
  2.   data() {
  3.     return {
  4.       tel: '',
  5.       digit: '',
  6.       number: '',
  7.       password: '',
  8.     };
  9.   },
  10. };

禁用输入框

通过 readonly 将输入框设置为只读状态，通过 disabled 将输入框设置为禁用状态。

显示图标

通过 left-icon 和 right-icon 配置输入框两侧的图标，通过设置 clearable 在输入过程中展示清除图标。

  1. <van-cell-group>
  2.   <van-field
  3.     v-model="value1"
  4.     label="文本"
  5.     left-icon="smile-o"
  6.     right-icon="warning-o"
  7.     placeholder="显示图标"
  8.   />
  9.   <van-field
  10.     v-model="value2"
  11.     clearable
  12.     label="文本"
  13.     left-icon="music-o"
  14.     placeholder="显示清除图标"
  15.   />
  16. </van-cell-group>
  1. export default {
  2.   data() {
  3.     return {
  4.       value1: '',
  5.       value2: '123',
  6.     };
  7.   },
  8. };
  1. <van-cell-group>
  2.   <van-field
  3.     v-model="username"
  5.     required
  6.     label="用户名"
  7.     placeholder="请输入用户名"
  8.   />
  9.   <van-field
  10.     v-model="phone"
  11.     required
  12.     label="手机号"
  13.     placeholder="请输入手机号"
  14.     error-message="手机号格式错误"
  15.   />
  16. </van-cell-group>

插入按钮

通过 button 插槽可以在输入框尾部插入按钮。

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

格式化输入内容

通过 formatter 属性可以对输入的内容进行格式化，通过 format-trigger 属性可以指定执行格式化的时机，默认在输入时进行格式化。

  1. export default {
  2.   data() {
  3.     return {
  4.       value1: '',
  5.       value2: '',
  6.     };
  7.   },
  8.   methods: {
  9.     formatter(value) {
  10.       // 过滤输入的数字
  11.       return value.replace(/\d/g, '');
  12.     },
  13.   },
  14. };

高度自适应

对于 textarea，可以通过 autosize 属性设置高度自适应。

  1. <van-field
  2.   v-model="message"
  3.   rows="1"
  4.   autosize
  5.   label="留言"
  6.   type="textarea"
  7.   placeholder="请输入留言"
  8. />

显示字数统计

设置 maxlength 和 show-word-limit 属性后会在底部显示字数统计。

  1. <van-field
  2.   v-model="message"
  3.   rows="2"
  4.   autosize
  5.   label="留言"
  6.   type="textarea"
  7.   maxlength="50"
  8.   placeholder="请输入留言"
  9.   show-word-limit
  10. />

输入框内容对齐

通过 input-align 属性可以设置输入框内容的对齐方式，可选值为 center、right。

  1. <van-field
  2.   v-model="value"
  3.   label="文本"
  4.   placeholder="输入框内容右对齐"
  5.   input-align="right"
  6. />

Events

方法

通过 ref 可以获取到 Field 实例并调用实例方法，详见组件实例方法。

Slots

样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考。

设置 type 为 number 后，为什么 input 标签的类型仍为 text?

HTML 原生的 type="number" 属性在 iOS 和 Android 系统上都存在一定问题，比如 maxlength 属性不生效、无法获取到完整的输入内容等。因此设置 type 为 number 时，Field 不会使用原生的 type="number" 属性，而是用现代浏览器支持的 来控制输入键盘的类型。

清除按钮监听是的移动端 Touch 事件，参见桌面端适配。