Vant Field input box

Introduced

The input box component in the form

Introduced

import Vue from 'vue';
import { Field } from 'vant';

Vue.use(Field);

Code demo

Basic usage

You can bind the value of the input box in both directions via v-model, and set the placeholder prompt text through placeholder

<!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为父元素来提供外边框。 -->
<van-cell-group>
  <van-field v-model="value" placeholder="请输入用户名" />
</van-cell-group>

export default {
  data() {
    return {
      value: ''
    };
  }
}

Custom type

Different types of input boxes are defined based on type properties, and the default value is text

<!-- 输入任意文本 -->
<van-field v-model="text" label="文本" />
<!-- 输入手机号，调起手机号键盘 -->
<van-field v-model="tel" type="tel" label="手机号" />
<!-- 允许输入整数，调起数字键盘 -->
<van-field v-model="digit" type="digit" label="整数" />
<!-- 允许输入数字，调起全键盘 -->
<van-field v-model="number" type="number" label="数字" />
<!-- 输入密码 -->
<van-field v-model="password" type="password" label="密码" />

export default {
  data() {
    return {
      tel: '',
      text: '',
      digit: '',
      number: '',
      password: ''
    };
  }
}

Tips: The digit type is supported starting with version 2.4.2

Disable the input box

Set the input box to read-only with readonly and the input box to disable with display

<van-cell-group>
  <van-field label="文本" value="输入框只读" readonly />
  <van-field label="文本" value="输入框已禁用" disabled />
</van-cell-group>

The icon is displayed

Configure the icons on both sides of the input box with the loft-icon and right-icon configurations, and display the clear icons during the input process by setting clearable

<van-cell-group>
  <van-field
    v-model="value1"
    label="文本"
    left-icon="smile-o"
    right-icon="warning-o"
    placeholder="显示图标"
  />
  <van-field
    v-model="value2"
    clearable
    label="文本"
    left-icon="music-o"
    placeholder="显示清除图标"
  />
</van-cell-group>

export default {
  data() {
    return {
      value1: '',
      value2: '123'
    };
  }
};

Error prompt

Setting the required property means that this is a required item and can be displayed with the error or error-message properties for the corresponding error prompt

<van-cell-group>
  <van-field
    v-model="username"
    error
    required
    label="用户名"
    placeholder="请输入用户名"
  />
  <van-field
    v-model="phone"
    required
    label="手机号"
    placeholder="请输入手机号"
    error-message="手机号格式错误"
  />
</van-cell-group>

Insert the button

The button slot allows you to insert a button at the end of the input box

<van-field
  v-model="sms"
  center
  clearable
  label="短信验证码"
  placeholder="请输入短信验证码"
>
  <van-button slot="button" size="small" type="primary">发送验证码</van-button>
</van-field>

Format the input

The formatter property allows you to format the input

<van-field
  v-model="value"
  label="文本"
  :formatter="formatter"
  placeholder="格式化输入内容"
/>

export default {
  data() {
    return {
      value: ''
    };
  },
  methods: {
    formatter(value) {
      // 过滤输入的数字
      return value.replace(/\d/g, '');
    }
  }
}

Highly adaptive

For textarea, you can set the height adaptive through the autosize property

<van-field
  v-model="message"
  rows="1"
  autosize
  label="留言"
  type="textarea"
  placeholder="请输入留言"
/>

Display word count

When you set the maxlength and show-word-limit properties, word count is displayed at the bottom

<van-field
  v-model="message"
  rows="2"
  autosize
  label="留言"
  type="textarea"
  maxlength="50"
  placeholder="请输入留言"
  show-word-limit
/>

The contents of the input box are aligned

The input-align property allows you to set the alignment of the input box content, with optional values of centerer and right

<van-field
  v-model="value"
  :label="文本"
  :placeholder="输入框内容右对齐"
  input-align="right"
/>

Api

Props

Events

Field supports all native events of the Input label by default, except for the following events

Method

Ref allows you to get to the Field instance and call the instance method, as detailed in The Component Instance Method

Slots