el-config-provider在Vue3中自定义命名空间实现

一、场景

子应用使用微应用(qiankun)方式嵌入主应用时,如果主应用和子应用ElementUI版本不一致,可能会出现样式问题

二、实现

1、引入依赖sass、sass-loader
npm install sass
npm install sass-loader
2、创建element.scss

在src下创建/style/element.scss文件

@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'sub-el' // 自己需要的前缀
);
@import "element-plus/theme-chalk/src/index.scss";
3、main.js中引入创建的scss
import './style/element.scss'
4、App.vue中设置el-config-provider
<template><!--要与之前定义的名称一致--><el-config-provider namespace="sub-el"><router-view></router-view></el-config-provider>
</template>
 5、检查文件deep(.el-xxx)

需要替换为sub-el-xxx新的名称

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

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

相关文章

HR人才测评,如何考察想象力?

什么是想象力&#xff1f; 想象力是指&#xff0c;人们通过在已有物质的基础上&#xff0c;通过大脑想象、加工、创造出新事物的能力&#xff0c;举一个非常简单的例子&#xff0c;在提到鸟这种生活的时候&#xff0c;大家会联想到各种各样不同鸟的品种。 在企业招聘中常常应…

【vocabulary in use (elementary)】7 Feeling

happy 高兴 sad 伤心 angry 生气 upset 丧气 cold 冷 hot 热 thirsty 口渴 hungry 饿 well 很好 ill 生病 tired 累了 surprised 惊讶 关于喜欢的表达&#xff1a; like to do 偶尔一次喜欢 like doing 一直喜欢的 outdoor activities 户外运动 be keep on doing 坚持做 be fo…

需求预测算法面试

面试了某公司的需求预测算法岗位&#xff0c;在这里做一个总结。 虽然我的经历也是乏善可陈&#xff0c;但是还是勉强去试一试水。 之前在一家生鲜电商的算法经历&#xff0c; 问&#xff1a;肉类课组的优化到底是什么方面。 我&#xff1a;扩大生鲜自营品牌的占有率&#…

WebStorm 2024 for Mac JavaScript前端开发工具

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件&#xff08;适合自己的M芯片版或Intel芯片版&#xff09;&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功3、打开访达&#xff0c;点击【文…

编写动态库

1.创建库.c .h文件 2.编写Makefile文件 3.make之后形成.so文件 4.make output,形成mylib 5.把mylib拷贝到test里面 mv mylib /test 6.编译 gcc main.c -I mylib/include -L mylib/lib -lmymethod形成a.out 但是直接执行会出现以下问题 很显然没有找到动态库 7.解决加载找不…

JDeveloper 12C 官网下载教程

首先、我们要登录Oracle官网 Oracle 甲骨文中国 | 云应用和云平台 登录进去如果不是中文可以点击右上角带有国旗的图标就行更改&#xff0c;选择一个你能看懂的文字。 然后&#xff0c;点击“资源”—点击“开发人员下载” 然后&#xff0c;点击“开发工具” 这里有很多工具可…

美团实习—后端开发凉经

面试经历分享 日期&#xff1a; 4月22日时长&#xff1a; 50分钟 意外之喜 没想到在面试过程中&#xff0c;我再次被选中进行下一轮&#xff0c;这确实让我感到有些意外和欣喜。这次面试经历对我而言&#xff0c;不仅是一次技能的检验&#xff0c;更是一次知…

简述设计模式-工厂模式

概述 工厂模式是为了提供创建对象的方式&#xff0c;无需制定要创建的具体类。 举个例子&#xff0c;假如我是甲方需要制造一辆车&#xff0c;我可以要油车&#xff0c;可以要电车&#xff0c;也可以油电混动车&#xff0c;如果没有工厂&#xff0c;我需要自己找到对应的制造…

可重入锁思想,设计MQ迁移方案

如果你的MQ消息要从Kafka切换到RocketMQ且不停机&#xff0c;怎么做&#xff1f;在让这个MQ消息调用第三方发奖接口&#xff0c;但无幂等字段又怎么处理&#xff1f;今天小傅哥就给大家分享一个关于MQ消息在这样的场景中的处理手段。 这是一种比较特例的场景&#xff0c;需要保…

数据质量管理-可访问性管理

前情提要 根据GB/T 36344-2018《信息技术 数据质量评价指标》的标准文档&#xff0c;当前数据质量评价指标框架中包含6评价指标&#xff0c;在实际的数据治理过程中&#xff0c;存在一个关联性指标。7个指标中存在4个定性指标&#xff0c;3个定量指标&#xff1b; 定性指标&am…

kaggle量化赛金牌方案(第七名解决方案)

获奖文章(第七名解决方案) 致谢 我要感谢 Optiver 和 Kaggle 组织了这次比赛。这个挑战提出了一个在金融市场时间序列预测领域中具有重大和复杂性的问题。 方法论 我的方法结合了 LightGBM 和神经网络模型,对神经网络进行了最少的特征工程。目标是结合这些模型以降低最终…

WebDriver API (2)

本文将继续上文对WebDriver API的功能使用进行介绍。 一、浏览器操作 1. 浏览器前进forward与后退back 浏览器前进操作是指导航到前一个页面&#xff0c;在浏览器的历史记录中向前移动一页。 浏览器后退操作是指导航到前一个页面&#xff0c;在浏览器的历史记录中向后移动一…

JVM专题之走进类加载

1.1 Java及JVM简介 TIOBE语言热度排行榜:https://www.tiobe.com/tiobe-index/ 世界上没有最好的编程语言&#xff0c;如果有&#xff0c;我相信一定是JAVA。 1.2 Java发展的重大事件 1995年5月23日&#xff0c;Java语言诞生 1996年1月&#xff0c;第一个JDK-JDK1.0诞生 1996…

C语言编程-基于单链表实现贪吃蛇游戏

基于单链表实现贪吃蛇游戏 1.定义结构体参数 蛇行走的方向 蛇行走的状态 蛇身节点类 维护蛇的结构体型 2.游戏运行前预备工作 定位光标位置 游戏欢迎界面 绘制游戏地图&#xff08;边界&#xff09; 初始化游戏中的蛇身 创建食物 3.游戏运行 下一个位置是食物&#xff0c;就吃掉…

ArcGIS中将测绘数据投影坐标(平面坐标)转地理坐标(球面经纬度坐标)

目录 前言1.测绘数据预览1.1 确定带号1.2 为什么是对Y轴分带&#xff0c;而不是对X轴分带&#xff1f; 2 测绘数据转shp2.1 添加数据2.2 显示XY数据2.3 添加经纬度字段2.4 计算经纬度 3.shp数据重投影4.总结 前言 最近在刚好在做一个小功能&#xff0c;将测绘数据转为经纬度坐标…

浙江建筑安全员A证2024年最新考试题库练习

46.总承包单位依法将建设工程分包给其他单位的&#xff0c;分包合同中应当明确各自的安全生产方面的权利、义务。总承包单位对分包工程的安全生产承担&#xff08;&#xff09;责任。 A.全部 B.主要 C.部分 D.连带 答案&#xff1a;D 47.实施总承报的建设工程发生事故&…

Git命令远程分支的合并和本地分支的同步

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

怎么压缩ppt文件大小?这四种压缩方法真的超级好用!

怎么压缩ppt文件大小&#xff1f;当我们精心打造PPT时&#xff0c;随着创意的涌动和内容的充实&#xff0c;常常会发现PPT文件的大小也在不知不觉间悄然膨胀&#xff0c;这背后其实隐藏着诸多因素&#xff0c;首先&#xff0c;我们可能过于追求视觉效果&#xff0c;不经意间在P…

【信息学奥赛】CSP-J/S初赛05 计算机原码、补码和反码

本专栏&#x1f449;CSP-J/S初赛内容主要讲解信息学奥赛的初赛内容&#xff0c;包含计算机基础、初赛常考的C程序和算法以及数据结构&#xff0c;并收集了近年真题以作参考。 如果你想参加信息学奥赛&#xff0c;但之前没有太多C基础&#xff0c;请点击&#x1f449;专栏&#…

IPython交互式Shell的高级功能:探索Python交互式编程的边界

&#x1f680; IPython交互式Shell的高级功能&#xff1a;探索Python交互式编程的边界 IPython是一个强大的Python交互式解释器&#xff0c;它提供了许多高级功能&#xff0c;使得Python编程更加高效和有趣。这些功能包括但不限于改进的交互式Shell、Jupyter笔记本、魔术命令、…