無界(wujie)微前端子應用elementUI時,dialog中使用Select、TimePicker等元件,彈出框位置異常解決方案

码上触发發表於2024-05-26

無界(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定位在子應用範圍之內。如圖:

相關文章