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

Lucenter

在使用Element Plus 的情况下 打开文档编辑 会导致原本的页面UI有问题



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

Lucenter

这是正常的页面

Lucenter

Lucenter

Lucenter

cxy

您好，为了兼容老版本的浏览器，系统表单使用的是 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

htt1231

最好的方法是修改element plus命名空间，element plus官方有例子，而不是添加外层类名，如果楼上是o2oa官方人员，这回答真是不行

cxy

htt1231 发表于 2024-8-9 13:57
最好的方法是修改element plus命名空间，element plus官方有例子，而不是添加外层类名，如果楼上是o2oa官方 ...

确实用element plus命名空间是更好的解决方案。感谢你的建议。当然，最后一句不加就更好了，小小管理员总有力有不逮的时候。
解决方案查看附件

Lucenter

htt1231 发表于 2024-8-9 13:57
最好的方法是修改element plus命名空间，element plus官方有例子，而不是添加外层类名，如果楼上是o2oa官方 ...

感谢！我去试试

Lucenter

cxy 发表于 2024-8-13 17:09
确实用element plus命名空间是更好的解决方案。感谢你的建议。当然，最后一句不加就更好了，小小管理员总 ...

已经解决 感谢！