无界(wujie)微前端子应用elementUI时,dialog中使用Select、TimePicker等组件,弹出框位置可能会异常,如图:
解决方法参考:
public/index.html文件
1、body中加style="position:relative"
2、script中加
if(window.__POWERED_BY_WUJIE__){ Document.documentElement.classList.add(“isDialog”) //无界环境下向Document添加一个指定的CSS类名 }
3、style中加
.isDialog .el-popper{ position:absolute !important;//Select、TimePicker等组件点击后的弹出框都是el-popper }
还没完,此时原先位置在子应用范围之内的弹出框已经正常,但如果原先位置在子应用范围之外的弹出框仍然会被挤错位。如图:
此时解决方案有二:
⑴ 控制dialog的宽度,让弹出框的位置在子应用范围内;
⑵ 将dialog定位在子应用范围之内。如图: