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

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

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏8 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript