微信小程序Vant弹窗组件如何具体实现？

本文共计5318个文字，预计阅读时间需要22分钟。

作为长期从事前端开发的你，一定见过不少弹框组件。你可能想过要实现一个弹框库，或者想要定制化各种标准UI框架中的弹框组件。今天这篇文章将带你解析……

作为从事前端开发的你肯定见过不少的弹框组件，你可曾有想过要自己实现一个弹框组件库，又或者想完全定制化的使用各种标准UI框架中的弹框组件呢？

今天这篇文章将会带着你解析这一系列疑问，以vant-weapp组件库为例，从开发标准的弹窗组件使用到高度定制复合自我审美的弹窗，再到完全研究清楚vant-weapp框架弹窗组件部分源码。

一、vant-weapp弹窗组件介绍

vant-weapp组件库是有赞团队开发的 一款灵活简洁且美观的小程序UI组件库 ，此文将以这个组件库的用法为标准，下文提及的弹框组件均指的是此组件库中的弹框。

弹框分类

vant-weapp中弹框主要分为**两大类：弹出层Popup和对话框Dialog，**弹出层一般是带有背景遮罩层和内容展示区域用于在不跳转页面情况下进行详情的展示作用，对话框多数用于带有详情展示的同时还带有希望用户确认等操作。如下图所示，图左为典型的Dialog，图右为典型的Popup。