vue--vant組件庫field輸入框

安裝vant UI框架：

cnpm install vant –-save-dev

導入組件-在main.js里：

import Vant from 'vant';
import'vant/lib/vant-css/index.css';
Vue.use('Vant')

Field輸入框是一個高頻組件

完全支持Input 標簽所有的原生屬性，比如 maxlength、placeholder、autofocus 等

准備工作：

創建一個頁面: Field.vue

在router.js里配置Field頁面的路由

{
  path: '/field',
  name: 'field',
  component: () => import('./views/Field.vue')
}

在index.vue里添加一項

代碼演示Field輸入框：

基礎用法：

普通的一個小示例，只有一個label標簽，和一個輸入框：

<van-cell-group>
       <van-field 
         v-model="value"
         placeholder="請輸入用戶名" 
         label="用戶名" 
       />
</van-cell-group>

我們還可以給他們增加些修飾，比如在label前面加個icon，在輸入框尾部加個icon，還可以點擊右側的icon做一個交互

通常項目里點擊icon會彈出一個彈出框，這里我們暫且就toast一個輕提示：

<van-cell-group>
       <van-field 
         v-model="value"
         placeholder="請輸入用戶名" 
         label="用戶名" 
         left-icon="contact"
         icon="question"
         @click-icon="$toast('question')"
       />
</van-cell-group>

錯誤提示一共有兩種，一種是在輸入框里顯示錯誤提示，另一種是在輸入框下方顯示錯誤提示

在輸入框里顯示錯誤提示如下：

<van-cell-group>
       <van-field 
         v-model="value"
         placeholder="請輸入用戶名" 
         label="用戶名" 
         left-icon="contact"
         icon="question"
         @click-icon="$toast('question')"
         error
       />
</van-cell-group>

錯誤提示在輸入框下面展示如下：

<van-cell-group>
       <van-field 
         v-model="value"
         placeholder="請輸入用戶名" 
         label="用戶名" 
         left-icon="contact"
         icon="question"
         @click-icon="$toast('question')"
         error-message="輸入不正確噢"
       />
</van-cell-group>

還有一個高頻用法，就是發送驗證碼的用法

這就用到了組件的擴展-slot

slot的值有4個，label，left-icon，icon，button

相當於是代表在4個位置上進行自定義

在DOM里完整的代碼如下：

<van-cell-group style="line-height: 60px;">
       <van-field 
         v-model="value"
         placeholder="請輸入用戶名" 
         label="用戶名" 
         left-icon="contact"
       >
          <van-button slot="button" type="primary" size="small">發送驗證碼</van-button>
       </van-field>
</van-cell-group>

 

如果有對不齊的情況，可以在瀏覽器里查看Elements找對應的class，在css樣式里進行修改即可

原文鏈接：https://mp.weixin.qq.com/s/qOPlNWfWWBWeaaCX6oeZNw