Vant庫的使用，及日期元件的一些注意點

愣錘發表於2018-05-22
元件

Vant庫對於開發商城類專案，真的是非常nice，會讓你情不自禁愛上它。Vant庫支援按需載入、為移動端商城設計的風格，非常完美。但是，本人在實際開發中，也遇到了一些小問題，折騰了老半天，最終得以解決。下面先說說在vue中使用Vant庫的流程及一些注意事項，以及遇到的坑和解決辦法。

首先送上官網傳送門：www.youzanyun.com/zanui/vant#…，具體的api可自行查閱使用。

第一步，安裝：

cnpm i vant -S
複製程式碼

第二步，引入元件：

關於怎麼引入Vant元件，有全域性引入（非常不推薦）和按需引入兩種方式

這裡演示按需引入的方式，因為官網說的稍微有些複雜，對於一些剛接觸的小夥伴，可能會造成一些誤解（PS：我在剛開始接觸的時候這裡就蹲了兩個坑，簡直欲哭無淚呀~）。直接說怎麼用吧：

  • 為了方便我們按需引入元件，這裡還需要安裝一個外掛

cnpm i babel-plugin-import -D
複製程式碼

  • 安裝好該外掛好，還需要在.babelrc檔案中plugins那裡進行一個簡單的配置，這裡附上完整的plugins部分內容。這裡我們在plugins陣列中插入了import那個陣列，其他內容是原來就有的。

"plugins": [    
    "transform-vue-jsx",     
    "transform-runtime",    
    ["import", {      
        "libraryName": "vant",      
        "libraryDirectory": "es",      
        "style": true    
    }]
]複製程式碼

  • 完成好配置後，在main.js中按需引入你需要的元件。例如這裡引入Vant的button元件：

import { Button } from 'vant'; // 在mian.js中通過import匯入元件，多個元件直接在{，，，}加入即可
Vue.use(Button); //讓vue載入該元件如果還需要用其他元件，可以這樣寫Vue.use(Button).use().user();複製程式碼

<van-button type="default">預設按鈕</van-button> // 在template中使用元件複製程式碼
  • 這裡提一點，如果是類似Toast這種元件，只需要在main.js中引入就好：
import { Toast } from 'vant';

// 然後在你需要的頁面直接這樣使用就好
// 只要引入後，vant就會自動把Toast元件掛在vue的原型上Vue.prototype.$Toast = Toast;
this.$Toast('message');複製程式碼

Vant庫的使用，及日期元件的一些注意點

可以看到，這裡button元件以及正常匯入使用了。Vant中還有更多適合實際開發的功能更豐富的元件，小夥伴們自行查閱官方文件使用吧。附官網API文件傳送門：www.youzanyun.com/zanui/vant#…


最後，在說一個關於Vant日期元件使用時所遇到的一個大坑。Vant庫的使用，及日期元件的一些注意點

Vant日期元件的官網api沒有給出關於事件函式的使用demo，到時小編在使用時不小心邁進了一個大坑。就是change或者confirm事件時，怎麼都獲取不到回撥引數，即在點選確定時回去不到返回的選中時間，總是提示undefined或者null。下面是小編錯誤的寫法，大家不要踩坑：

<!--這是html部門-->
<van-datetime-picker      
    v-model="currentDate"      
    type="datetime"      
    @confirm="confirm()"      
    @change="change()" />

// 這是對應的方法
methods: {
    confirm(val) {
       console.log(val)
    },
    change(e) {
       console.log(e.getValues())
    }
}複製程式碼

乍一看，是按照文件上說的方式使用的呀，可是不僅confirm沒有返回選中的日期時間，change事件的各種回撥方式也使用不了。但是吧，如果你要列印1，又可以列印出來，說明介面走這個方法了。到底怎麼回事呢，選中的時間怎麼就出不來呢？小編差點都要懷疑是不是這個Vant元件有問題了！

說重點：後來小編終於找到了解決辦法：

原來是這裡出了問題，@confirm="confirm()" @change="change()" 

這裡多加了一對括號，正確的寫法是

<!--這是html部分-->
<van-datetime-picker      
    v-model="currentDate"      
    type="datetime"      
    @confirm="confirm"      
    @change="change" 
/>

// 這是對應的方法
methods: {
    confirm(val) {
       console.log(val) // 列印出了時間
    },
    change(e) {
       console.log(e.getValues()) // 列印出了選中的時間，是個陣列
    }
}複製程式碼

到這，問題圓滿解決了！希望對小夥伴們有幫助


相關文章