【在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: () => '',
      };
    }
  }
}

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

相关推荐
岁月宁静3 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者4 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~4 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge4 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再5 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴5 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟6 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1236 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚6 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院6 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js