微前端-无界弹窗中下拉选等，propper.js定位不准问题

框架vue2+elementUi

下拉选等定位不准原因，是因为无界将DOM元素放在子应用的shadow。而弹窗中的定位为fixed是相对于整个窗口，所以我们会发现下拉选偏移的位置正好是主应用占据的距离。

比如我们有个顶部导航，会发现fixed的top+导航高度就是正确的位置(左右等同理)。

解决方案一

修改定位为position: absolute。

.el-popper{
  position: absolute !important;
}
.el-tooltip_popper{
  position: absolute !important;
}

解决方案二

修改propper.js的源码计算，我们可以手动补充上主应用所占据的距离。

源码位置 node_modules/element-ui/lib/utils/popper.js。

我们可以修改622行的代码(或许修改其他地方也可以)如下

修改前

// round top and left to avoid blurry text
var left = Math.round(data.offsets.popper.left);
var top = Math.round(data.offsets.popper.top);

修改后(根据你的布局方式加上top或者left)

// round top and left to avoid blurry text
var left =styles.position === "fixed"? Math.round(data.offsets.popper.left)+ "你的主应用所占据宽度(左右布局)":Math.round(data.offsets.popper.top);
var top = styles.position === "fixed"? Math.round(data.offsets.popper.top) + "你的主应用所占据高度(上下布局)":Math.round(data.offsets.popper.top);
        

如果不能修改源码，可以通过无界提供的js-loader修改源码思路和上面一样。

const plugins = [
      {
        jsLoader: (code) => {
          return code.replace("var left = Math.round(data.offsets.popper.left);var top = Math.round(data.offsets.popper.top);", 'var left =styles.position === "fixed"? Math.round(data.offsets.popper.left)+ "你的主应用所占据宽度(左右布局)":Math.round(data.offsets.popper.top);var top = styles.position === "fixed"? Math.round(data.offsets.popper.top) + "你的主应用所占据高度(上下布局)":Math.round(data.offsets.popper.top);');
        },
      },
    ];

方案三

集思广益的链接

github.com/Tencent/wuj…