Vant Field 輸入框

介紹

表單中的輸入框組件

引入

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

Vue.use(Field);

代碼演示

基礎用法

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

<!-- Field 是基于 Cell 實現的，可以使用 CellGroup 作為父元素來提供外邊框。 -->
<van-cell-group>
  <van-field v-model="value" placeholder="請輸入用戶名" />
</van-cell-group>

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

自定義類型

根據type屬性定義不同類型的輸入框，默認值為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: digit 類型從 2.4.2 版本開始支持

禁用輸入框

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

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

顯示圖標

通過left-icon和right-icon配置輸入框兩側的圖標，通過設置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'
    };
  }
};

錯誤提示

設置required屬性表示這是一個必填項，可以配合error或error-message屬性顯示對應的錯誤提示

<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>

插入按鈕

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

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

格式化輸入內容

通過formatter屬性可以對輸入的內容進行格式化

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

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

高度自適應

對于 textarea，可以通過autosize屬性設置高度自適應

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

顯示字數統(tǒng)計

設置maxlength和show-word-limit屬性后會在底部顯示字數統(tǒng)計

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

輸入框內容對齊

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

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

API

Props

Events

除下列事件外，Field 默認支持 Input 標簽所有的原生事件

方法

通過 ref 可以獲取到 Field 實例并調用實例方法，詳見 組件實例方法

Slots