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

Lucenter · 发表于 2024-8-8 14:56:34|来自：

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

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

Lucenter · 发表于 2024-8-8 15:04:43|来自：

本帖最后由 Lucenter 于 2024-8-8 15:34 编辑

微信截图_20240808150421.jpg

这是正常的页面

Lucenter · 发表于 2024-8-8 15:09:18|来自：

Lucenter · 发表于 2024-8-8 15:32:13|来自：

Lucenter · 发表于 2024-8-8 15:32:15|来自：

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

cxy · 发表于 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