Element UI 和 Element Plus样式污染

已于 2024-05-16 14:08:04 修改
阅读量254 收藏
点赞数 2
文章标签： 前端 vue.js javascript elementui
于 2024-03-12 21:53:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49174517/article/details/136664522
版权

一、场景

  1. 集成的聊天功能，用的是 vue3+elementplus，但是使用改集成功能的项目是 vue2+elementui
  2. 由于2个项目组件库类名、全局变量名相同，被elementplus的覆盖，从而出现样式污染的问题
    在这里插入图片描述
    在这里插入图片描述

二、解决

elementplus自定义命名

image.png

文档 vite.config 省略了一段代码，导致更改后不生效，通过查看官方给的示例发现，需要配置按需导入的插件，样式才会生效 https://github.com/element-plus/element-plus-vite-starter

image.png

image.png

Rukawa Maple
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element-plus离线文档
05-07
element-plus离线文档，node服务已经配置好，直接node server.js即可使用，可以在内网部署，已经部署成功。
vs+element-ui highlightjs 样式
08-20
highlightjs 页面显示源码借鉴 element-ui 和vs结合实现的页面样式 实现教程可以去我的博客；里面翻看教程
element-ui升级到element-plus兼容性问题处理
最新发布
lingliu0824的博客
03-29 647
解决：element-plus在el-popover组件中新增了hide-after属性设置延迟关闭。将其设置为0或者其他自定义时间即可。elemen-ui中el-popover的offset默认是0，在element-plus中offset默认是12。解决：el-dropdown-item不能独立使用，在el-dropdown标签内使用。对应的源码位置如下，是elemen-plus中的dropdown-item文件报的错。
element ui plus 离线部署文档
04-25
需安装node.js + http-server 1.解压之后 2.进入文件夹运行cmd 3.命令中输入serve 4.启动成功后访问服务端口
element-plus-2.2.12 本地资源文件
08-01
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）
HTML+Element-ui邮件管理前端界面
07-12
不用脚手架，无需创建vue工程 若element-ui显示故障： 1.查看是否引用 <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <!-- 引入element 的组件库--> <script src="https://unpkg.com/element-ui/lib/index.js"></script> 2.html代码是否被div包含 3.是否 var Ctor = Vue.extend(Main) new Ctor().$mount('#app')
使用element ui 的分页功能出现样式混乱
weixin_52940426的博客
09-02 876
很大原因是由于不规范操作，比如说 1.修改页面样式时不使用类名，使用的标签名来修改样式。 2.由于全局样式对组件库的污染，自己可能没有察觉 问题如下图：
微前端四：qiankun在开发中遇到的问题
weixin_44384273的博客
10-18 2201
1、图片路径不对； 2、vue2.0 + element ui 和 vue3.0 + element plus样式冲突；
一个关于vue+element-ui打包样式污染的问题
weixin_48722827的博客
06-30 222
在本地运行的项目没有问题当打包发布时就会又样式问题，经过排查后发现原因时未在页面的styel标签加入scoped导致的样式污染，全部加上scoped后还是又一个样式被污染，但是找了很久没有找到污染源经过一系列的尝试找到了一个方法
Element-ui和Element-Plus的区别_Element2和Element3的区别
热门推荐
天马3798
02-04 2万+
Element-ui和Element-Plus的区别_Element2和Element3的区别 一、定义区别 Element-UI对应Element2：基本不支持手机版 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element-Plus对应Element3：组件布局考虑了手机版展示 基于 Vue 3，面向设计师和开发者的组件库 二、框架区别 Element-ui适用于Vue2框架 Element-plus适用于Vue3框架 三、开发中
【前端】Element-UI和Element-Plus的区别
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
06-22 1万+
【前端】Element-UI和Element-Plus的区别
修改elementUi中分页el-pagination的样式
tangtanglinli的博客
11-12 622
【代码】修改elementUi中分页el-pagination的样式。
element ui 到 element plus的一些小问题
小星的博客
06-15 1393
书接上文vue2 + element-ui到 vue3 + elment-plus我遇到的一些问题 以下以及解决方法 标签中抛弃了:visible.sync的写法，改成v-model就好了 标签中使用 包住你的主题内容 标签中有时候可能需要过滤一下出来的选项 element-ui我是这么写的 element-plus改成了这样子 然后是写项目的时候可能有点原因需要跳转以后重新刷新一下到本地页面...
设置element ui plus分页组件的样式
weixin_47560716的博客
10-26 771
设置element ui plus分页组件样式
项目总结
ChengYanan的博客
04-27 273
采集 0、使用TaildirSource，可以实现断点续传 1、FileChannel的logDir中配置多个目录对应不同的硬盘，来增大吐吞量 2、写入HDFS时，使用hdfs.rollSize、hdfs.rollInterval解决产生小文件的问题（理解小文件的弊端） 3、原来使用Flume做ETL处理，非常影响性能，后来Flume只用来做数据采集，吞吐量提升30%（16线程CPU,32G内存，...
ElementUI中分页Pagination 样式的修改（分页组件的封装）
mingY的博客
09-17 1567
1.实现效果： 2.实现代码： <template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout"
解决element-ui修改原生的样式污染全局的样式
zebghfv的博客
10-27 2112
方法一：把样式css写在没有scoped属性的style标签中，部分组件的样式需要用到!important使其样式权重最高 缺点：会影响全局的样式。 优点：某些共同的样式不需要进行重复书写。 现在页面有2个组件，可以进行点击切换，且2个组件有同样的element-ui组件。现在想对Home的输入框设置蓝色，about组件的设置为红色。 如图home组件的样式书写： about组件的样式书写： 最后的结果是2个组件的样式都是蓝色。显然不是想要的结果。 解决办法：利用方法二 方法二：样式穿透 >&gt
使用Element-Plus样式失效的解决方法
m0_74738939的博客
10-07 971
如果使用了自动按需引入，在使用组件的时候，你还import组件 那么会导致样式冲突，即样式出不来，这个时候删除掉import的组件即可。在我今天写样式的时候 碰到了使用ElementBox样式的失效 ，查贴后发现 原来是因为手动引入与按需自动引入的冲突。
element UI 和 element UI plus
11-04
Element UI和Element Plus都是基于...在表格组件中，Element Plus和Element UI都提供了插槽来自定义表格的内容，但是在表格头部插槽方面，两者有所不同。如果你需要使用更多的组件和功能，可以考虑使用Element Plus。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值