1. 程式人生 > 程式設計 >微信小程式使用 vant Dialog元件的正確方式

微信小程式使用 vant Dialog元件的正確方式

簡介

Vant是有贊開源的一套基於Vue2.0的Mobile元件庫。通過Vant,可以快速搭建出風格統一的頁面,提升開發效率。目前已有近50個元件,這些元件被廣泛使用於有讚的各個移動端業務中。Vant旨在更快、更簡單地開發基於Vue的美觀易用的移動站點。特性元件都是來源於有讚的微商城業務,並且經過有贊業務的檢驗,更靠譜完善詳實的中文文件專門的設計師團隊維護視覺規範,統一而優雅支援babel-plugin-import單測覆蓋率超過90%建議搭配webpack,babel使用Vant。

在 app.json 或 index.json 中引入元件

"usingComponents": {
 "van-dialog": "path/to/vant-weapp/dist/dialog/index"
}

在xxx.wxml中寫入

van-dialog id="van-dialog" />

在xxx.js中引入

import Dialog from 'path/to/vant-weapp/dist/dialog/dialog';(記得路徑寫入你自己的路徑)

當然如果你想立馬看到效果,在onLoad中直接寫入

Dialog.alert({
 title: '標題',message: '彈窗內容'
}).then(() => {
 // on close
});

微信小程式使用 vant Dialog元件的正確方式

總結

以上所述是小編給大家介紹的微信小程式使用 vant Dialog元件的正確方式,希望對大家有所幫助,也非常感謝大家對我們網站的支援!