作為從事前端開發的你肯定見過不少的彈框組件，你可曾有想過要自己實現一個彈框組件庫，又或者想完全定制化的使用各種標準UI框架中的彈框組件呢？

今天這篇文章將會帶著你解析這一系列疑問，以vant-weapp組件庫為例，從開發標準的彈窗組件使用到高度定制復合自我審美的彈窗，再到完全研究清楚vant-weapp框架彈窗組件部分源碼。

一、vant-weapp彈窗組件介紹

vant-weapp組件庫是有贊團隊開發的 一款靈活簡潔且美觀的小程序UI組件庫 ，此文將以這個組件庫的用法為標準，下文提及的彈框組件均指的是此組件庫中的彈框。

彈框分類

vant-weapp中彈框主要分為**兩大類：彈出層Popup和對話框Dialog，**彈出層一般是帶有背景遮罩層和內容展示區域用于在不跳轉頁面情況下進行詳情的展示作用，對話框多數用于帶有詳情展示的同時還帶有希望用戶確認等操作。如下圖所示，圖左為典型的Dialog，圖右為典型的Popup。

注冊小程序組件

在使用彈框組件之前記得在小程序的app.json文件中先注冊組件，詳細介紹見 快速上手 ，例如注冊van-popup組件代碼如下：

// app.json"usingComponents": { "van-popup": "path/to/@vant/weapp/dist/popup/index"}

在項目中實際使用如下：

在本文后續分析van-dialog源碼中會發現在dialog的index.json中也定義過van-popup組件，但是我們要直接實行van-popup組件必須在小程序的配置文件app.json中按照上圖方式進行定義，微信小程序官網說明過 自定義組件內部的引入組件只在該組件內生效

注冊完組件之后，就可以直接在小程序頁面中使用這里注冊的自定義組件，組件名稱為這里 key ，例如：。

二、Popup基本用法 常見用法

最常見的用法就是直接使用van-popup組件，通過組件的show屬性來控制其是否展示，組件內部嵌套的其他組件或標簽是popup組件的內容，如下所示：

// wxml<button bindtap="showPopup">展示彈出層</button><van-popup	show="{{ show }}"	position="top"	bind:close="onClose" closeable>內容</van-popup>// jsPage({ data: { show: false }, showPopup() { this.setData({ show: true }); }, onClose() { this.setData({ show: false }); }});

重點屬性分析

van-popup組件可以通過position屬性的五個值： center、top、right、bottom、left 來快捷的控制是從哪個位置彈出，例如：上例中的彈框從上往下彈出

可以通過round屬性來控制彈窗內容是否顯示圓角，closeable可以決定是否顯示關閉彈框的圖標按鈕，例如：上例中的彈窗將不顯示圓角，同時顯示關閉按鈕