介紹

表單中的輸入框組件。

引入

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

Vue.use(Field);

代碼演示

基礎(chǔ)用法

可以通過 v-model 雙向綁定輸入框的值，通過 placeholder 設(shè)置占位提示文字。

<!-- Field 是基于 Cell 實(shí)現(xiàn)的，可以使用 CellGroup 作為容器來提供外邊框。 -->
<van-cell-group>
  <van-field v-model="value" label="文本" placeholder="請輸入用戶名" />
</van-cell-group>

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

自定義類型

根據(jù) type 屬性定義不同類型的輸入框，默認(rèn)值為 text。

<!-- 輸入任意文本 -->
<van-field v-model="text" label="文本" />
<!-- 輸入手機(jī)號，調(diào)起手機(jī)號鍵盤 -->
<van-field v-model="tel" type="tel" label="手機(jī)號" />
<!-- 允許輸入正整數(shù)，調(diào)起純數(shù)字鍵盤 -->
<van-field v-model="digit" type="digit" label="整數(shù)" />
<!-- 允許輸入數(shù)字，調(diào)起帶符號的純數(shù)字鍵盤 -->
<van-field v-model="number" type="number" label="數(shù)字" />
<!-- 輸入密碼 -->
<van-field v-model="password" type="password" label="密碼" />

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

Tips: digit 類型從 2.4.2 版本開始支持

禁用輸入框

通過 readonly 將輸入框設(shè)置為只讀狀態(tài)，通過 disabled 將輸入框設(shè)置為禁用狀態(tài)。

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

顯示圖標(biāo)

通過 left-icon 和 right-icon 配置輸入框兩側(cè)的圖標(biāo)，通過設(shè)置 clearable 在輸入過程中展示清除圖標(biāo)。

<van-cell-group>
  <van-field
    v-model="value1"
    label="文本"
    left-icon="smile-o"
    right-icon="warning-o"
    placeholder="顯示圖標(biāo)"
  />
  <van-field
    v-model="value2"
    clearable
    label="文本"
    left-icon="music-o"
    placeholder="顯示清除圖標(biāo)"
  />
</van-cell-group>

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

錯誤提示

設(shè)置 required 屬性表示這是一個必填項(xiàng)，可以配合 error 或 error-message 屬性顯示對應(yīng)的錯誤提示。

<van-cell-group>
  <van-field
    v-model="username"
    error
    required
    label="用戶名"
    placeholder="請輸入用戶名"
  />
  <van-field
    v-model="phone"
    required
    label="手機(jī)號"
    placeholder="請輸入手機(jī)號"
    error-message="手機(jī)號格式錯誤"
  />
</van-cell-group>

插入按鈕

通過 button 插槽可以在輸入框尾部插入按鈕。

<van-field
  v-model="sms"
  center
  clearable
  label="短信驗(yàn)證碼"
  placeholder="請輸入短信驗(yàn)證碼"
>
  <template #button>
    <van-button size="small" type="primary">發(fā)送驗(yàn)證碼</van-button>
  </template>
</van-field>

格式化輸入內(nèi)容

通過 formatter 屬性可以對輸入的內(nèi)容進(jìn)行格式化，通過 format-trigger 屬性可以指定執(zhí)行格式化的時(shí)機(jī)，默認(rèn)在輸入時(shí)進(jìn)行格式化。

<van-field
  v-model="value1"
  label="文本"
  :formatter="formatter"
  placeholder="在輸入時(shí)執(zhí)行格式化"
/>
<van-field
  v-model="value2"
  label="文本"
  :formatter="formatter"
  format-trigger="onBlur"
  placeholder="在失焦時(shí)執(zhí)行格式化"
/>

export default {
  data() {
    return {
      value1: '',
      value2: '',
    };
  },
  methods: {
    formatter(value) {
      // 過濾輸入的數(shù)字
      return value.replace(/\d/g, '');
    },
  },
};

高度自適應(yīng)

對于 textarea，可以通過 autosize 屬性設(shè)置高度自適應(yīng)。

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

顯示字?jǐn)?shù)統(tǒng)計(jì)

設(shè)置 maxlength 和 show-word-limit 屬性后會在底部顯示字?jǐn)?shù)統(tǒng)計(jì)。

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

輸入框內(nèi)容對齊

通過 input-align 屬性可以設(shè)置輸入框內(nèi)容的對齊方式，可選值為 center、right。

<van-field
  v-model="value"
  label="文本"
  placeholder="輸入框內(nèi)容右對齊"
  input-align="right"
/>

API

Props

Events

除下列事件外，F(xiàn)ield 默認(rèn)支持 Input 標(biāo)簽所有的原生事件

方法

通過 ref 可以獲取到 Field 實(shí)例并調(diào)用實(shí)例方法，詳見組件實(shí)例方法。

Slots

樣式變量

組件提供了下列 Less 變量，可用于自定義樣式，使用方法請參考主題定制。

常見問題

設(shè)置 type 為 number 后，為什么 input 標(biāo)簽的類型仍為 text?

HTML 原生的 type="number" 屬性在 iOS 和 Android 系統(tǒng)上都存在一定問題，比如 maxlength 屬性不生效、無法獲取到完整的輸入內(nèi)容等。因此設(shè)置 type 為 number 時(shí)，F(xiàn)ield 不會使用原生的 type="number" 屬性，而是用現(xiàn)代瀏覽器支持的 inputmode 屬性來控制輸入鍵盤的類型。

在桌面端點(diǎn)擊清除按鈕無效？

清除按鈕監(jiān)聽是的移動端 Touch 事件，參見桌面端適配。