qiankun模式下 主应用严格模式，子应用el-popover 点击无效不显示

qiankun模式下 主应用严格模式，子应用el-popover 点击无效不显示

问题描述

qiankun 模式下，主应用严格模式，子应用el-popover 点击无效不显示，但是开启开发者模式，查看body有相关DOM信息，el-popover display:none,无top 和left值

问题原因

1,层级限制:qiankun 的沙箱隔离导致Popover 的Dom无法正常挂载
2，样式隔离：即使DOM挂在正确，样式也可能被隔离
3，时间阻断：主应用可能拦截了子应用的弹出事件

解决方式

1，强制Popover 挂载到子应用容器
子应用 DOM代码调整
增加 popper-class=“popover-time”
:popper-options=“{
boundariesElement: ‘viewport’,
gpuAcceleration: false,
forceAbsolute: true
}”
:append-to-body=“false”

              <el-popover 
                ref="popoverTime"
                v-model="isPopoverVisible"
                placement="bottom"
                width="600"
                trigger="click"
                style="margin: 0; padding: 0"
                popper-class="popover-time"
                :popper-options="{
                  boundariesElement: 'viewport',
                  gpuAcceleration: false,
                forceAbsolute: true
                }"
                :append-to-body="false">

在点击的区域增加

// html
<div slot="reference" @click.stop="triggerPopover"></div>
// JS
    triggerPopover(){
      console.log('triggerPopover')
    }

                  

2，全局配置ElementUI
在子应用 main.js中补充Popover的全局配置

3，样式修正，
在子应用的element-variables.css

.el-popover.popover-time {
// 自定义样式
}

重启项目，在qiankun环境下可正常展示