uniapp可以用vant嗎

web前端|uni|appuniapp web前端-uni-app cf搜索易語言源碼,vscode中文mac,ubuntu主題不顯示,查看tomcat日子,安卓調用sqlite,織夢cms百度搜索插件,前端框架構架工具,python爬蟲代理驗證,php 分離,seo alt屬性,馬克斯網站建設,html寫手機網頁代碼,入手操作小說模板傷使用,在線考試靜態頁面模板,數據庫教師信息管理系統源代碼,小程序 下載lzw推薦（免費）：uni-app教學html5 網站源碼,ubuntu中vim卸載,Tomcat的類加載順序,爬蟲店裝飾,php視頻直播網站,十堰電商seo推廣怎么做lzw uni-app使用Vant組件電腦壁紙網站源碼 自動采集,vscode如何設置右鍵,Ubuntu編譯dll,tomcat連接關閉,夏天爬蟲,php 判斷首頁,宿州seo推廣價格優惠,傳奇簡單網站模板下載安裝,網頁在線聊天模板lzw

前言

vant ui有h5版和微信小程序版。愛掏網 - it200.com其h5版只能用于h5，其微信小程序版（vant weapp）可用于微信和App，從uni-app 2.4.7起，H5和QQ小程序也支持了微信小程序組件。愛掏網 - it200.com

使用步驟

下載代碼

在項目根目錄下新建 wxcomponents 目錄 ，此目錄應該與components 目錄同級。愛掏網 - it200.com

直接通過 git 下載 vant-weapp 最新源代碼，并將dist目錄拷貝到新建的wxcomponents目錄下，并重命名dist為vant-weapp。愛掏網 - it200.com

在pages.json的globalStyle中 引入所需要的組件

試試是否成功

顯示

export default { data() { return { columns: ["杭州", "寧波", "溫州", "嘉興", "湖州"], flag: false }; }, methods: { show() { console.log("1 =", "show"); this.flag = !this.flag; }, changePicker(event) { console.log("1 =", event); } }};

注意事項

Vant組件中Notify 消息提示比較特殊

不僅需要在pages.json的globalStyle中 引入還需要再main.js中添加到vue原型上

//main.jsimport Notify from './wxcomponents//vant/notify/notify';Vue.prototype.$notify = Notify

然后在頁面中使用

彈出提示 export default { methods: { showNotify() { this.$notify({ type: "danger", message: "通知內容" }); } }};