其實與element的寫法大致相同,首先我們需要先下載依賴。
npm i vant@latest-v2 -S
然后,在main.js中引入
import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);
然后,我們就能正常使用vant了,要注意的是,vue2使用vant2,而vue3使用vunt3版本。
接下來,我們看一個例子,我們這邊要使用時間選擇器和底部彈出框來展示一個選擇時間的組件。因為直接顯示選擇時間的組件會很難看,所以我們加上彈出框的白色 底部來突出這個時間選擇器。
其中van-popup是底部彈出框,而van-datetime-picker是時間選擇器。
以下就是我們顯示出的效果了。
上一篇: 如何讓Vue實現(xiàn)移動端適配
下一篇: Vue3中修改計算屬性內容