记一次 - qiankun搭建微前端之vue3基座，vue3子应用的踩坑之路（三） 子应用弹窗挂载到 body 上的样式问题

• 这个问题解决很久了，一种没有进行总结。近期有jy留言，我才找到之前的代码，准备把这个问题记录一下。
• 这个解决方案不一定准确，可以解决我当时遇到的问题，如果有问题可以多多留言，大家一起讨论。

element-plus@2.2.x

问题

子应用中的弹窗在主应用环境下打开时，样式不对。
审查元素可以看到，子应用的弹窗挂在到了主应用的body上，这就导致了子应用弹窗不能继承自己应用的样式

解决思路

• 要把弹窗挂在到子应用下，才可以继承子应用的样式

修改子应用根节点id
<div id="subApp"></div>

• main.js
• 当子应用在qiankun模式下打开，将弹窗挂载到子应用根节点
• 否则，挂在到body

// 初始化重置popup组件挂载容器
function redirectPopup(container) {
  // 子应用中需要挂载到子应用的弹窗的className，用作标记
  // 初始化挂载
  const whiteList = [
    'el-popper-container'
  ]
  // 保存原有document.body.appendChild方法
  let originFn = document.body.appendChild.bind(document.body)

  document.body.appendChild = (dom) => {
    // 根据标记，来区分是否用新的挂载方式
    whiteList.forEach(i => {
      if (i.indexOf(dom.className) > -1) {
        container.querySelector('#subApp').appendChild(dom)
      } else {
        originFn(dom)
      }
    })
  }
}