vue—qiankun微应用中antd样式问题解决方案

样式问题解决方案"/>

vue—qiankun微应用中antd样式问题解决方案

1、qiankun微前端

微前端技术栈为vue3+ts+antd3
qiankun微前端官网： 官网
ant-design-vue官网： 官网

2、问题描述

在子应用与主应用对接过程中，页面可以正常展示，但是ant组件显示异常，弹框、下拉框等需要挂载的组件挂载位置异常，导致页面的功能、布局、样式异常。经过查阅资料以及查看ant官网，暂时发现两种解决方案。

1、使用ant提供的组件api设置组件挂载的节点

此方案可行

2、重写document.body.appendChild

详见：
此方案实现比较麻烦，但更接近原理，相较于element-ui，ant-design-vue组件库在挂载进行组件判断时比较麻烦，本人技术不行，暂未完整实现

3、组件

1、气泡卡片a-popover

增加属性：

:getPopupContainer="t => t.parentElement"

2、单选框a-select

:getPopupContainer="t => t.parentElement"

3、弹框a-modal

a-modal在页面中直接应用（$el指向当前页面的vm实例）

:get-container="() => $el"
//$el为当前组件的vm.$el

a-modal被封装为组件，并且在模板中仅有a-modal的时候无法直接使用$el，解决方法为在a-modal外再包裹一层div

<template>
<div><a-modal:get-container="() => $el"></a-modal>
</div>
<template>

4、下拉菜单a-dropdown

:getPopupContainer="t => t.parentElement"

5、文字提示a-tooltip

:getPopupContainer="t => t.parentElement"

6、气泡确认a-popconfirm

:getPopupContainer="() => $el"
//如果使用:getPopupContainer="t => t.parentElement"会出现样式问题，比如气泡会被遮挡

7、全局提示message

//message组件的使用与其他组件不同，详见：
//需要在使用前（main.js或者app.vue或者引入安装ant-design-vue组件库的文件中）全局配置和全局销毁方法
import messagefrom 'ant-design-vue';message.config({//app需要修改项目的index.html中的div的id，也就是vue实例挂载（.mount()）的idgetContainer: ():any => {return document.getElementById('app')}})