初步解析小程序前端框架vant-ui源码

初步解析小程序前端框架vant-ui源码

---

本学期的系统分析课程要求我们做一个小项目，我们以微信小程序为框架进行了项目的前端搭建，在UI上以开源组件库vant-ui为基础进行了设计，其中用到了许多该开源库的设计，对于项目前端起到了很大的帮助。

组件库的使用教程在 https://youzan.github.io/vant-weapp/#/intro ，介绍说明比较详细且简单，因此这里不再赘述，这里希望对于框架的组成和实现方式进行初步的窥探。

---

应用实例

以Popup 弹出层为例，这个组件的实现功能如下图所示，可以实现在页面的各个位置以不同的方式弹出提示框选择框的效果

• 效果
  

• 使用方法：

  • 引入组件

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

  • 代码演示
  • 基础用法
  • popup默认从中间弹出

  <van-popup show="{
       
       { show }}" bind:close="onClose">内容</van-popup>
  Page({
       
       
  data: {
       
       
      show: false
  },
  
  onClose() {
       
       
      this.setData({
       
        show: false });
  }
  });
  

  • 弹出位置
  • 通过position属性设置 Popup 弹出位置

  <van-popup
  show="{
        
        { show }}"
  position="top"
  overlay="{
        
        { false }}"
  bind:close="onClose"
  >
  内容
  </van-popup>
  

• API

  参数	说明	类型	默认值
  show	是否显示弹出层	Boolean	false
  z-index	z-index 层级	Number	100
  overlay	是否显示背景蒙层	Boolean	true
  position	可选值为 top bottom right left	String	-
  duration	动画时长，单位为毫秒	Number / Object	300
  custom-style	自定义弹出层样式	String	``
  overlay-style	自定义背景蒙层样式	String	``
  close-on-click-overlay	点击蒙层是否关闭	Popup	Boolean true
  safe-area-inset-bottom	是否为iPhoneX留出底部安全距离	Boolean	true
  safe-area-inset-top	是否留出顶部安全距离（状态栏高度 + 导航栏高度）	Bo