OpenTiny Vue 组件库适配微前端可能遇到的4个问题

本文由体验技术团队 TinyVue 项目成员岑灌铭同学创作。

前言

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略，每个应用可以选择不同的技术栈，独立开发、独立部署。

TinyVue组件库的跨技术栈能力与微前端十分契合，往期我们也有文章，指导如何在wujie微前端中使用TinyVue组件库，文章链接：https://mp.weixin.qq.com/s/ZqDXemh0GfnQpWACdzXdig

目前许多对微前端有需求的用户已经在使用wujie和TinyVue开发了，在使用了一段时间后，合作企业用户和个人用户反馈了组件库一些问题。经过一番交流、沟通与定位，最终发现是用户接入了微前端框架后，在特定场景下导致的一系列问题，在非微前端应用中，组件库运行良好。

复现问题后，通过一系列排查与分析，最终总结出了四个问题：

1. absolute 定位的弹出元素错位，且页面滚动不会重新定位
2. fixed 定位的弹出元素错位
3. 弹出元素位置发生翻转
4. 表格中的 select 点击后，下拉选项出现后马上消失

对于以上问题，TinyVue组件库做了相应的适配以及给用户提供了解决方案，最终使得 TinyVue 组件良好运行在wujie微前端中。

首先来简单介绍一下wujie微前端实现原理，wujie微前端是采用iframe+webcomponet的实现方式。通过iframes实现js沙箱能力。子应用的实例instance在iframe内运行，dom在主应用容器下的webcomponent内，通过代理 iframe的document到webcomponent，可以实现两者的互联。

想要了解更多可以查看，无界微前端介绍：https://wujie-micro.github.io/doc/guide/

接下来展开说一下，收集总结的四个问题~

问题总结

问题一：absolute 定位的弹出元素错位，且页面滚动不会重新定位。

“弹出元素错位”错误原因分析：

打开控制台，审查元素查看样式，看到element.sytle的第一直觉是transfrom的偏移量计算不正确，顺着这个线索排查计算错误的原因。

排查前先简单介绍一下TinyVue组件库这个偏移量的计算规则：

1.找到弹出元素的 offsetParent（父定位元素），如果没有则返回body。
2.使用 getBoundingClientRect 计算 offsetParent 以及引用元素（图中的输入框，简称为reference）距离视口的位置信息。
3.以弹出元素放右边为例，transform的左偏移量的计算规则为reference.left - offsetParent.left + reference.width

因为弹出元素的position设置为absolute，所以弹出元素的定位是根据其offsetParent计算位置的，没有offsetParent则是根据视口来计算位置。

上述例子中，弹出元素的offsetParent为 null，因此默认返回了body作为其offsetParent，绝大部分情况下，body和视口左侧和上侧是对齐的，因此用body计算的偏移量，在视口上也适用。

在微前端中，子应用的body可能相对于视口有偏移。弹出元素的偏移量实际是根据body计算的，但他是非定位元素，最终导致的元素错位。

解决方案：

既然计算规则是根据body计算的，那么将子应用将body设置为position: relative将其变为定位元素即可。

滚动不会重新定位原因分析：

首先还是简单介绍组件库这部分逻辑：

1.通过parentNode向上查找引用元素（输入框）的可滚动的祖先元素(如果没有配置冒泡则返回第一个可滚动祖先元素，否则返回所有可滚动祖先元素)
2.为步骤1获取到的元素加上滚动方法的监听。
3.祖先元素滚动时重新计算弹出元素的位置，使弹出元素跟随引用元素。

但是在wujie微前端中，子应用的document再往上查找就是null了。而滚动条在主应用当中。因此主应用的滚动无法被监听到。

解决方案：

将子应用将body设置为position: relative同样也解决了上述问题。设置后，只有当子应用内滚动条滚动后才需要重新计算。

问题二： fixed 定位的弹出元素错位。

在修复的问题一的情况下，依旧有部分情况会出现弹出元素错位的 bug。并且下图中可以看到，弹出元素从右边翻转到了左边。

原因分析：

表单元素在modal中，modal是fixed定位，因此表单输入框也是fixed定位。由于引用元素是fixed定位，所以弹出元素与之相对应也应该使用fixed定位。

组件库逻辑对于fixed定位的弹出元素偏移量的计算，在问题一提到的步骤下还增加了部分特殊处理。下面代码是计算偏移量逻辑其中较为关键的一段代码：

/**
 * @description 计算弹出元素的偏移量
 * @param el 引用元素
 * @param parent 弹出元素的祖先定位元素
 * @param fixed 弹出元素是否绝对定位
 * @returns 用于计算偏移量的相关信息
 */
const getOffsetRectRelativeToCustomParent = (
  el: HTMLElement,
  parent: HTMLElement,
  fixed: boolean) => {
   
  
  let {
    
    top,
    left,
    width,
    height 
  } = getBoundingClientRect(el)
  let parentRect = getBoundingClientRect(parent)

  if (fixed) {