解决微前端qiankun中子应用(element组件动态加载的元素)样式丢失的问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
项目使用了微前端qiankun,子应用中使用的是element组件库,当有el-select组件的子应用插入父应用的弹窗中初看效果是正常的,但是当点击el-select组件时发现组件下拉框中下拉列表样式丢失,后来在主应用中查看源码发现动态加载的el-select下拉列表DOM是动态插入到主应用中,因为在qiankun中应用间的样式是隔离的导致下拉列表没有样式(子应用中有element的所有样式内容,但是点击el-select组件时下拉列表DOM被动态渲染到了主应用中,因为样式隔离,子应用中element的样式对下拉列表DOM不生效),于是重写了document.body.appendChild方法:
let instance = null;
let originFn = document.body.appendChild.bind(document.body)
function render(props = {}) {
const { container, microWidgetProps } = props;
redirectPopup(container);
let base = window.__POWERED_BY_QIANKUN__ ? microWidgetProps.history.getBasePath.split("#")[0] + "/" : "/";
console.log(microWidgetProps.contextMenu.dirDocid);
router = new VueRouter({
base,
routes: routers,
mode: "hash",
});
console.log(router, "router");
instance = new Vue({
router,
render: (h) => h(App),
}).$mount(container ? container.querySelector("#app") : "#app");
}
function redirectPopup(container) {
// 子应用中需要挂载到子应用的弹窗的className,用作标记
const addPopup = 'el-select-dropdown el-popper'
// const editPopup = 'el-dialog__wrapper story-para-edit-popup'
const whiteList = [addPopup]
// 保存原有document.body.appendChild方法
let originFn = document.body.appendChild.bind(document.body)
// 重写appendChild方法
document.body.appendChild = (dom) => {
// 根据标记,来区分是否用新的挂载方式
if (whiteList.includes(dom.className)) {
container.querySelector('#app').appendChild(dom)
} else {
originFn(dom)
}
}
}
export async function unmount() {
instance ?.unmount ?.();
instance = null;
router = null;
history ?.destroy ?.();
document.body.appendChild = originFn;
}
之所以要标记使用和还原document.body.appendChild方法,是因为主应用和子应用中有很多组件都用到了这个方法,比如select,日历组件。不还原这个方法的话,这些组件的样式会受到破坏。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献14条内容
所有评论(0)