qiankun 微前端 隔离子应用样式,解决 ant-design-vue 子应用样式污染问题(已落地)

样式冲突产生原因

先分析乾坤qiankun 构建之后,会根据你的配置 给每个子应用生成一个id, 当加载到对应子应用的时候,就把内容放到对应的id 标签里去, 这样能有效的隔离 js 代码,但是样式是加载在全局的
在这里插入图片描述
所以 当两个子应用的 全局的样式名一样的时候, 切换的子应用的上一个子应用的样式没有被清除是公用,所以就造成了样式污染,同样主应用和子应用之间也会有这个污染

解决问题 一、使用 qiankun 的内置方法start 的experimentalStyleIsolation 设置为true

我们使用experimentalStyleIsolation 来进行隔离 , 因为experimentalStyleIsolation的配置相当于加了scoped ,进行子应用的样式作用域控制,防止子应用的样式进行污染,对比其他人的
在这里插入图片描述
我们在主应用的app.js 使用start 配置,将子应用隔离开

import { start } from 'qiankun';start({sandbox: {// 开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 [shadow dom]节点,从而确保微应用的样式strictStyleIsolation: false,// 设置实验性的样式隔离特性,即在子应用下面的样式都会包一个特殊的选择器规则来限定其影响范围experimentalStyleIsolation: true}});

然后再访问子应用的标签 ,增加作用域前缀,这样子应用之间就会单独隔离开,但是会存在很多问题
在这里插入图在这里插入图片描述

解决冲突 二、配置组件挂载位置

select的数据会找不到挂载的节点 ,造成展示异常,无法显示,并且Modal 和Drawer 都会挂载 整个body
在这里插入图片描述

这是 只用 找到子应用的App.vue 使用 ConfigProvider 对 整个子应用的标签进包裹就行,其中 finanxxxxxxxxxx,是你自己定义的子应用名称,keep-alive 和 router-view 不做解释,跟这个优化没关系,根据个人情况写里面的内容

	<ConfigProvider :locale="locale" :getPopupContainer="getPopupContainer"><keep-alive :include="loadedRouteNames"><router-view id="finanxxxxxxxxxx" /></keep-alive></ConfigProvider>js代码
import { ConfigProvider } from 'ant-design-vue';components: { ConfigProvider },methods: {getPopupContainer() {return document.getElementById('finanxxxxxxxxxx');}}

这样 通过qiankun 的配置 加上我们子应用组件挂载就能解决大部分的问题 ,类似用scoped 给每个样式增加作用域的方法解决

如果是elemt UI 的可以看 下面的博客,我借鉴过他的思路,也是他是通过改下 挂载函数的方法,思路很重要,主要就是解决挂载问题
https://blog.csdn.net/zhangjing1019/article/details/135862536?spm=1001.2014.3001.5502

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/389367.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全开源TikTok跨境商城源码/TikTok内嵌商城+搭建教程/前端uniapp+后端

多语言跨境电商外贸商城 TikTok内嵌商城&#xff0c;商家入驻一键铺货一键提货 全开源完美运营 海外版抖音TikTok商城系统源码&#xff0c;TikToK内嵌商城&#xff0c;跨境商城系统源码 接在tiktok里面的商城。tiktok内嵌&#xff0c;也可单独分开出来当独立站运营 二十一种…

大模型之技术概述

本文作为大模型综述第一篇&#xff0c;介绍大模型技术基本情况。 目录&#xff1a; 1.大模型技术的发展历程 2.大模型技术的生态发展 3.大模型技术的风险与挑战 1.大模型技术的发展历程 2006 年 Geoffrey Hinton 提出通过逐层无监督预训练的方式来缓解由于梯度消失而导致的…

HyperDiffusion阅读

ICCV 2023 创新点 HyperDiffusion&#xff1a;一种用隐式神经场无条件生成建模的新方法。 HyperDiffusion直接对MLP权重进行操作&#xff0c;并生成新的神经隐式场。 HyperDiffusion是与维度无关的生成模型。可以对不同维度的数据用相同的训练方法来合成高保真示例。 局限性…

贪心算法—股票交易时机Ⅱ

在此前我们已经介绍过贪心算法以及股票交易时机Ⅰ&#xff0c;有需要的话可以移步至贪心算法_Yuan_Source的博客-CSDN博客 题目介绍 122. 买卖股票的最佳时机 II - 力扣&#xff08;LeetCode&#xff09; 给你一个整数数组 prices &#xff0c;其中 prices[i] 表示某支股票第…

楼宇智能技术实训室解决方案

一、楼宇智能技术实训室建设背景 随着信息技术的迅猛发展&#xff0c;智能化已经成为现代建筑发展的重要趋势。楼宇智能技术&#xff0c;作为智能化建筑的核心支撑&#xff0c;集成了物联网、大数据、云计算、人工智能等多种先进技术&#xff0c;实现了楼宇内部各类设施、系统…

【Java算法专场】前缀和(上)

前言 在求数组或者矩阵求和等问题&#xff0c;我们如果采用暴力解法&#xff0c;时间复杂度可能会达到O(n)或者更高&#xff0c;因此&#xff0c;我们可利用前缀和来解决。 前缀和 前缀和是指序列中的n项和&#xff0c;相当于数学问题中秋数列的前n项和。主要用于数组或列表中…

ElasticSearch入门(六)SpringBoot2

private String author; Field(name “word_count”, type FieldType.Integer) private Integer wordCount; /** Jackson日期时间序列化问题&#xff1a; Cannot deserialize value of type java.time.LocalDateTime from String “2020-06-04 15:07:54”: Failed to des…

【C++】学习笔记——C++的类型转换

文章目录 二十三、C的类型转换1. C语言中的类型转换2. C类型转换static_castreinterpret_castconst_castdynamic_cast 未完待续 二十三、C的类型转换 1. C语言中的类型转换 在C语言中&#xff0c;如果赋值运算符左右两侧类型不同&#xff0c;或者形参与实参类型不匹配&#x…

声学改造后的气膜馆:提升体验的独特优势—轻空间

气膜馆因其快速建造、低成本和灵活性&#xff0c;近年来广泛应用于各种运动和活动场所。然而&#xff0c;传统气膜馆在声学表现上存在一些挑战&#xff0c;例如回声和噪音的控制。随着声学改造技术的应用&#xff0c;气膜馆的声学环境得到了显著改善。轻空间将探讨声学改造后的…

轨迹优化 | 基于ESDF的共轭梯度优化算法(附ROS C++/Python仿真)

目录 0 专栏介绍1 数值优化:共轭梯度法2 基于共轭梯度法的轨迹优化2.1 障碍约束函数2.2 曲率约束函数2.3 平滑约束函数3 算法仿真3.1 ROS C++实现3.2 Python实现0 专栏介绍 🔥课设、毕设、创新竞赛必备!🔥本专栏涉及更高阶的运动规划算法轨迹优化实战,包括:曲线生成、…

2024年对初学者友好的4款视频剪辑软件不容错过

在这个视觉当道的时代&#xff0c;视频剪辑不再是专业人士的专属领域。随着技术的进步&#xff0c;现在即使是初学者也能轻松上手&#xff0c;发挥自己的创意。今天&#xff0c;我来给大家推荐四款在2024年非常适合初学者使用的视频剪辑软件&#xff0c;让你的创意能够在指尖轻…

Duplicate class kotlin.collections.jdk8.CollectionsJDK8Kt found in modules。Android studio纯java代码报错

我使用java代码 构建项目&#xff0c;初始代码运行就会报错。我使用的是Android Studio Giraffe&#xff08;Adroid-studio-2022.3.1.18-windows&#xff09;。我在网上找的解决办法是删除重复的类&#xff0c;但这操作起来真的太麻烦了。 这是全部报错代码&#xff1a; Dupli…

VLC实现视频文件转RTSP流

1.选择本地文件 2.创建流 现在已经开始推流了&#xff1a; 3.播放上面创建的流 访问地址&#xff1a;rtsp://:8554/test111

dfs,CF 196B - Infinite Maze

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 https://codeforces.com/problemset/problem/196/B 二、解题报告 1、思路分析 考虑如何判断一条路径可以无限走&#xff1f; 我们对朴素的网格dfs改进&#xff0c;改进为可以dfs网格外的区域 如果存在某个…

免费分享:全国传统村落空间分布数据(附下载方法)

数据简介 本数据是在中国传统村落名录的基础上&#xff0c;通过地理编码&#xff0c;制作成具有空间坐标信息的矢量数据。 数据属性 数据名称&#xff1a;全国传统村落空间分布数据数据时间&#xff1a;2012年至今&#xff0c;更新至第五批空间位置&#xff1a;全国数据格式&…

模拟自然光照:饮料稳定性测试的创新方法

饮料添加剂的光照稳定性测试旨在评估其在光照影响下的保持稳定性的能力&#xff0c;特别是在储存期间。此测试有助于制造商理解饮料在不同光源作用下的变化&#xff0c;例如颜色、口感、香气等感官性质的变化&#xff0c;以及营养成分的衰变速率。这些信息对改进产品配方、包装…

与树莓派的“黄金”关系,是如何帮助这家医疗设备公司扩大规模

稳定的供应和与Raspberry Pi的“黄金”关系帮助医疗设备公司进行了规模扩张 埃及医疗设备制造商Bio Business需要将物联网功能集成到其成功的患者监测设备系列中。Raspberry Pi技术使他们得以实现。 解决方案 RP2040 Compute Module 4 企业规模 中小企业 行业 医疗技术 …

怎么挑选适合企业的安全管理软件?2024值得推荐的5款安全管理软件?

在企业安全管理时&#xff0c;你是否遇到过以下问题&#xff1a; 工作点多面广&#xff0c;信息整理和分析的工作量大&#xff0c;手工处理繁杂耗时&#xff1b; 传统巡检方式&#xff0c;无法保证巡检过程结果真实性&#xff1b; 纸质记录不清晰&#xff0c;问题改进缺乏数…

使用SpaceDesk实现iPad成为电脑拓展屏(保姆级教程)

使用SpaceDesk实现iPad成为电脑拓展屏 SpaceDesk是一个开源的软件, 所以说对学生和平民用户非常的友好, 连接后的画质也非常不错, 而且具有无线和有线两种连接方式. 接下来就开始教程: 1. 安装SpaceDesk电脑版 首先我们要下载SpaceDesk电脑版安装好: SpaceDesk官网 注意: …

2006-2022年中国农村经营管理年报

2006-2022年中国农村经营管理年报 1、时间&#xff1a;2006-2022年 2、格式&#xff1a;2006-2014年为EXCEL&#xff0c;2015-2022年为PDF 3、说明&#xff1a;根据农村经营管理情况统计报表制度调查数据整理、编辑的。本资料系统收录了全国各省、自治区、直辖市农村集体经济…