业务线使用element-ui dialog,drawer 的v-modal 层级问题:设置属性append-to-body=true 静态资源 404(字体,img等) webpack打包注入完整路径配置 file-loader|url-loader 增加publicPath const publicPath =http://localhost:${port} { test: /.(woff2?|eot|ttf|otf)$/i, use: [ { loader: 'file-loader',...
参考上面第二个链接,实现思路为在子应用unmount时,不调用vue或react的卸载事件,将rootDom append到document.body里面,并用样式隐藏,子应用重新mount时,将隐藏的rootDom显示 vue子应用 入口改造 ts复制代码let rootDom: Element | undefined; async function render(props: any) { console.log("render"); cons...
css沙箱还有个思路就是将子项目的样式局限到子项目的容器范围内生效,这样只需要给不同的子项目不同的容器就可以了。但是这样也会有新的问题,子项目中append到body的弹窗,样式就无法生效。所以说样式污染还需要制定规范才行,约定class命名前缀。 四、微前端方案实践 改造已有的项目为qiankun子项目,由于我们是vue技术...
{*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an array, else `false`.\n * @example\n *\n * _.isArray([1, 2, 3]);\n * // => true\n *\n * _.isArray(document.body.children);\n * // => false\n *\n * _.isArray('abc');...
新增:<qiankun-body>{template}</qiankun-body>容器。 新增:appInstanceMap用于存储 app 实例信息(最外层容器节点)。 注入:document,document.body,document.head打上标记(用于判断是否需要执行 patch) 补丁:Document\Element 原型链上的方法 DocumentElement ...
📦 🚀 Blazing fast, simple and complete solution for micro frontends. - qiankun/src/sandbox/patchers/dynamicAppend/common.ts at master · umijs/qiankun
rawDOMAppendOrInsertBefore: <T extends Node>(newChild: T, refChild?: Node | null) => T; scopedCSS: boolean; excludeAssetFilter?: CallableFunction; }) { return function appendChildOrInsertBefore<T extends Node>( this: HTMLHeadElement | HTMLBodyElement, ...
冲突 const shadow = subApp.attachShadow({ mode: "open" })//创建shadow dom,mode指是否可以通过js拿到子应用的dom shadow.innerHTML = ` <p>这是通过shadow dom添加的内容</p> //这里也可以放置style标签,设置shadow dom的样式 <style> p { color: green; } </style> ` </script> </body> </...
export default function patchDynamicAppend(mounting, proxy) { let dynamicStyleSheetElements = []; // 劫持插入函数 HTMLHeadElement.prototype.appendChild = function(element) { switch (element.tagName) { case LINK_TAG_NAME: // 如果是动态插入<style>标签到body上,则调整插入的位置到子应用挂载区 ...
this: HTMLHeadElement | HTMLBodyElement, newChild: T, refChild?: Node | null, ) { // 要插入的元素 let element = newChild as any; // 原始方法 const { rawDOMAppendOrInsertBefore } = opts; if (element.tagName) { // 解析参数 // eslint-disable-next-line prefer-const let { appName...