// basic.ts export const basic = Behavior({ methods: { $emit(...args) { this.triggerEvent(...args); }, set(data: object, callback: Function) { this.setData(data, callback); return new Promise(resolve => wx.nextTick(resolve)); }, getRect(selector: string, all: boolean) { return new Promise(resolve => { wx.createSelectorQuery() .in(this)[all "_blank" href="https://github.com/youzan/vant-weapp/blob/dev/packages/mixins/basic.ts">basic.ts

生命周期命名

其实生命周期如何命名到不是很重要，vant-weapp对命名进行了转换主要基于以下两个原因：

• 开发效率 ：vant-weapp源自适用于vue的UI组件库—— vant ，命名统一转换便于现有框架的逻辑复用
• 使用成本 ：生命周期命名向主流MVVM框架靠近减轻使用者的学习成本、框架维护成本

源码： component.ts#L24

mapKeysVantComponent

自定义组件的样式隔离

微信小程序自定义组件默认样式作用域的范围是为当前组件，也就是说组件文件夹下的wxss中的样式只对该文件夹下的wxml生效（除去标签名、ID选择器）

这种以组件为单位进行样式隔离的模式类似于React框架中处理的组件样式的库 styled-components

组件间样式共享

要在组件之前共享样式或者让自定义组件接受外部样式，可行方案有如下几种：

| styleIsolation属性配置 |

• page-isolated 表示在这个页面禁用 app.wxss ，同时，页面的 wxss 不会影响到其他自定义组件；
• page-apply-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式不会影响到其他自定义组件，但设为 shared 的自定义组件会影响到页面；
• page-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件，也会受到设为 shared 的自定义组件的影响。 | styleIsolation 选项从基础库版本 2.6.5 开始支持 | | --- | --- | --- | | addGlobalClass属性配置 | 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面 |
• 小程序基础库版本 2.2.3 以上支持
• 等价于styleIsolation: apply-shared
• vant-weapp中使用的是此方案 ： addGlobalClass: 'true' ，默认的 styleIsolation: 'shared' 不生效 | | externalClasses外部样式类 | 组件的使用者可以指定这个样式类对应的外部样式名 ，对应样式名的样式在组件内部生效 |
• 基础库 1.9.90 开始支持
• vant-weapp中也支持此方式
• 推荐使用此方式来自定义vant-weapp的样式 | | class="~blue-text"引用父组件样式 | 即使启用了样式隔离 isolated ，组件仍然可以在局部引用组件所在页面的样式或父组件的样式 | 基础库 2.9.2 开始支持 |

使用总结

!important

自定义组件通信方案

自定义组件通信主要包括 组件参数传递 和 事件监听 ，这两个功能都是微信小程序官网提供的；参数传递是由父传到子的单向传递，而事件监听则是相应原生事件或者自定义事件。自定义事件用于对组件的事件进行封装，自定义事件机制如下：

这里在van-dialog组件使用位置监听bindclick事件，最终这个事件会在van-dialog组件内部的button的tap时被触发，后面源码分析中的自定义组件的自定义事件全部采用的此种模式。

七、Popup弹出层组件源码分析

组件部分源码结构

popup组件部分源码结构如下：

组件的命名规范与微信小程序自定义组件的规范相符合（README.md为组件的使用说明文档，用于生成官网的组件文档说明）。

using-componentsvan-iconvan-overlay

组件主要逻辑

弹出层组件主要分类 遮盖层 和 内容层 ，内容层嵌套在遮盖层内部来确保视觉上覆盖在遮盖层之上。

遮盖层及事件

onClickOverlay

关闭按钮及事件

通过closable属性决定是否显示默认的关闭按钮，也可以通过关闭图标相关属性配置更改按钮样式，关闭按钮的事件有onClickCloseIcon，通过$emit触发组件的自定义事件close。

内容分发

positiontop、right、bottom、left、center

过渡动画

position

enter、enter-active、enter-to、leave、leave-active、leave-to

八、Dialog对话框组件源码分析

组件部分源码结构

dialog组件部分源码结构如下：

van-popup、van-button

组件布局结构

dialog组件整体基于popup组件，在其默认slot中添加了顶部标题的slot和按钮组元素，大致结构如下

源码结构：

函数式调用实现

在前面中通过Dialog函数调用来打开弹出框组件，实现函数式调用的核心思路主要是： 通过selectComponent(selector)方法查找（类似于查找DOM、Vue中查找组件实例）对页面中定义渲染好的dialog组件，手动更新其组件实例的数据。 ** Dialog方法定义如下：

**

函数式调用时候根据传入的options配置去更新找到的组件实例上的属性

由微信小程序自定义组件限制不能更新slot，slot需要用组件嵌套来传入

函数式调用中的options会有默认值强制覆盖掉van-dialog组件属性处传入的非id等其他属性，即函数调用的时通过组件传入的属性无效

**

Dialog.confirm

确认弹窗

调用方法

实现方式

调用Dialog时候默认执行定了显示取消按钮，其他无区别

Dialog.close

关闭弹窗

调用方法

Dialog.close()

实现方式

遍历内部缓存的所有调用Dialog方法找到的van-dialog组件实例，执行其close方法

Dialog.setDefaultOptions

更改对话框默认配置

调用方法

实现方式

通过Object.assign将传入的默认配置合并到内部Dialog.currentOptions配置上

Dialog.resetDefaultOptions

恢复对话框默认配置

调用方法

实现方式

恢复Dialog.currentOptions配置为Dialog.defaultOptions

总结

本文讲解了vant-weapp组件库中的弹框组件的基本用法、进阶用法、定制主题、自定义内容等用法，同时还更进一步的研究了vant-weapp组件中的popup组件、dialog组件的实现。也只有彻底弄懂了UI框架的封装思路我们才能更进一步的修改框架来定制化更复杂更贴合项目要求的各种组件，本文按照 由实用到进阶再到研究源码 的思路为各位研究框架源码提供另一种方法。

下一步将会在vant-weapp弹框组件之上封装一系列实战的案例，期待你的关注与收藏。

若此文对你有一点点帮助请点个赞鼓励下作者，毕竟原创不易:)

首发自语雀： www.yuque.com/johniexu/fr…

作者博客地址： blog.lessing.online/

作者github： github.com/johniexu

以上所述是小编给大家介绍的微信小程序vant弹窗组件的实现方式，希望对大家有所帮助，也非常感谢大家对网站的支持！