【在qiankun模式下el-dropdown点击,浏览器报Failed to execute ‘getComputedStyle‘ on ‘Window‘: parameter 1 is not o

在qiankun模式下el-dropdown点击,浏览器报Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'` 错误

在qiankun模式下el-dropdown点击,浏览器报Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'` 错误

在qiankun 前端框架中,主应用开启了样式隔离,

跳转子应用后,el-dropdown-menu点击,浏览器报浏览器报Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'` 错误。

问题描述

在qiankun 前端框架中,主应用开启了样式隔离,

跳转子应用后,el-dropdown-menu点击,浏览器报浏览器报Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'` 错误:

  1. 主应用 ,开启了qiankuan沙箱机制,乾坤会对子应用的DOM和样式进行隔离,可能回导致el-dropdown-menu的定位和样式定位的计算;
bash 复制代码
start({
  sandbox: {
    experimentalStyleIsolation: true,
    strictStyleIsolation: true
  },
  prefetch: 'all'
})
  1. getComputedStyle 报错,el-dropdown-menu 在计算样式时,可能无法正确获取 DOM 元素,导致 TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' 错误;

  2. 查看单独子应用的DOM元素

  3. 查看qiankun模式下的子应用的DOM元素

    没有自动的定位和样式定位的计算

解决方法

在子应用的main.js里面增加方法

bash 复制代码
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}else{
  const style = document.createElement('style');
  style.textContent = `
    svg { display: inline-block; overflow: visible!important; }
    use { width: 100%!important; height: 100%!important; }
  `;
  document.head.appendChild(style);
  const rawGetComputedStyle = window.getComputedStyle;
  window.getComputedStyle = function (element) {
    try {
      return rawGetComputedStyle.call(window, element);
    } catch (e) {
      console.warn('getComputedStyle error:', e);
      return {
        getPropertyValue: () => '',
      };
    }
  }
}

重启一下子应用,完美解决

相关推荐
人工智能训练师20 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny0720 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy21 小时前
css的基本知识
前端·css
昔人'21 小时前
css `lh`单位
前端·css
前端君1 天前
实现最大异步并发执行队列
javascript
Nan_Shu_6141 天前
Web前端面试题(2)
前端
知识分享小能手1 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 天前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光1 天前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军1 天前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite