解决微前端qiankun中子应用(element组件动态加载的元素)样式丢失的问题

中子应用(element组件动态加载的元素)样式丢失的问题"/>

解决微前端qiankun中子应用(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，日历组件。不还原这个方法的话，这些组件的样式会受到破坏。