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

1、qiankun微前端

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

2、问题描述

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

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

此方案可行

2、重写document.body.appendChild

详见:https://juejin.cn/post/7102698184496906247
此方案实现比较麻烦,但更接近原理,相较于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组件的使用与其他组件不同,详见:https://www.antdv.com/components/message-cn
//需要在使用前(main.js或者app.vue或者引入安装ant-design-vue组件库的文件中)全局配置和全局销毁方法
import messagefrom 'ant-design-vue';
  message.config({
  //app需要修改项目的index.html中的div的id,也就是vue实例挂载(.mount())的id
    getContainer: ():any => {return document.getElementById('app')}
  })
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值