沈阳学网站制作学校百度应用搜索

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>
// JStriggerPopover(){console.log('triggerPopover')}

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

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

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

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