12下一页
发帖
查看: 3451|回复: 10

VUE3 Elementplus 编辑任何文档导致样式有冲突

升级   0.02%

10

主题

15

回帖

2

积分

注册会员

Rank: 2

积分
2
发表于 2024-8-8 14:56:34|来自: | 显示全部楼层 |阅读模式
在使用Element Plus 的情况下 打开文档编辑 会导致原本的页面UI有问题



主要是在main.js 使用了 element相关的样式 。 如何解决这个问题?






回复

使用道具 举报

升级   0.02%

10

主题

15

回帖

2

积分

注册会员

Rank: 2

积分
2
发表于 2024-8-8 15:04:43|来自: | 显示全部楼层
本帖最后由 Lucenter 于 2024-8-8 15:34 编辑

微信截图_20240808150421.jpg
这是正常的页面
回复

使用道具 举报

升级   0.02%

10

主题

15

回帖

2

积分

注册会员

Rank: 2

积分
2
发表于 2024-8-8 15:09:18|来自: | 显示全部楼层
微信截图_20240808150703.jpg
回复

使用道具 举报

升级   0.02%

10

主题

15

回帖

2

积分

注册会员

Rank: 2

积分
2
发表于 2024-8-8 15:32:13|来自: | 显示全部楼层

回复

使用道具 举报

升级   0.02%

10

主题

15

回帖

2

积分

注册会员

Rank: 2

积分
2
发表于 2024-8-8 15:32:15|来自: | 显示全部楼层

打开的是系统自带的表单页面

打开的是系统自带的表单页面

回复

使用道具 举报

cxy

升级   4.92%

0

主题

83

回帖

492

积分

注册会员

Rank: 2

积分
492
发表于 2024-8-9 11:12:19|来自: | 显示全部楼层
您好,为了兼容老版本的浏览器,系统表单使用的是 ElementUI 。你使用 ElementPlus ,两边样式有冲突。
您可以修改Element Plus样式,在所有类名称前加上您最外层容器的类名,
比如
App.vue的容器为   <div class="appNode systemconfig"
ElementPlus有样式:
.fade-in-linear-enter-active, .fade-in-linear-leave-active {
    transition: var(--el-transition-fade-linear)
}
修改为:
.systemconfig .fade-in-linear-enter-active, .systemconfig .fade-in-linear-leave-active {
    transition: var(--el-transition-fade-linear)
}


参照 x_component_systemconfig
回复

使用道具 举报

升级   5%

30

主题

33

回帖

500

积分

注册会员

Rank: 2

积分
500
发表于 2024-8-9 13:57:47|来自: | 显示全部楼层
最好的方法是修改element plus命名空间,element plus官方有例子,而不是添加外层类名,如果楼上是o2oa官方人员,这回答真是不行
回复

使用道具 举报

cxy

升级   4.92%

0

主题

83

回帖

492

积分

注册会员

Rank: 2

积分
492
发表于 2024-8-13 17:09:40|来自: | 显示全部楼层
htt1231 发表于 2024-8-9 13:57
最好的方法是修改element plus命名空间,element plus官方有例子,而不是添加外层类名,如果楼上是o2oa官方 ...

确实用element plus命名空间是更好的解决方案。感谢你的建议。当然,最后一句不加就更好了,小小管理员总有力有不逮的时候。
解决方案查看附件
解决ElementPlus和Element UI的冲突.txt.zip (882 Bytes, 下载次数: 10)




回复

使用道具 举报

升级   0.02%

10

主题

15

回帖

2

积分

注册会员

Rank: 2

积分
2
发表于 2024-8-19 11:44:16|来自: | 显示全部楼层
htt1231 发表于 2024-8-9 13:57
最好的方法是修改element plus命名空间,element plus官方有例子,而不是添加外层类名,如果楼上是o2oa官方 ...

感谢!我去试试
回复

使用道具 举报

升级   0.02%

10

主题

15

回帖

2

积分

注册会员

Rank: 2

积分
2
发表于 2024-8-21 16:44:10|来自: | 显示全部楼层
cxy 发表于 2024-8-13 17:09
确实用element plus命名空间是更好的解决方案。感谢你的建议。当然,最后一句不加就更好了,小小管理员总 ...

已经解决 感谢!
回复

使用道具 举报

12下一页
发帖

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

联系客服 关注微信 下载APP 返回顶部 返回列表
viewthread