在Vue 3和Element Plus中，如果您在el-dialog组件打开时尝试修改body的样式而不生效，可能是由于样式层叠（specificity或者就绪时间）问题导致的。
解决方案通常涉及以下几点：
- 确保您的样式选择器具有足够的特异性来超越Element Plus内置样式。可以通过增加选择器中类的数量或使用
!important来实现，但应谨慎使用!important，因为它破坏了CSS特性的可维护性。 - 使用Vue的动态绑定来根据对话框的状态动态更改样式。
- 使用Vue的
<style>标签中的scoped属性来限定样式只作用于当前组件，避免影响全局。 - 如果您需要在打开对话框时改变
body的样式，可以在对话框打开时通过编程方式更改样式。
例如：
<template>
<el-dialog
:visible.sync="dialogVisible"
@open="openDialog"
@close="closeDialog"
>
<!-- 对话框内容 -->
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
openDialog() {
document.body.style.setProperty('background-color', 'blue', 'important');
},
closeDialog() {
document.body.style.removeProperty('background-color');
}
}
};
</script>
<style scoped>
.el-dialog__wrapper {
/* 您的自定义样式 */
}
</style>在上面的例子中，当对话框打开时（open事件触发），通过openDialog方法修改body的样式。对话框关闭时（close事件触发），通过closeDialog方法移除样式。使用!important是为了确保您的样式优先级足够高，覆盖掉Element Plus的默认样式。
请注意，直接修改body的样式可能会影响到整个应用，所以在实际项目中，应该尽量避免这种情况，尽可能使用组件级别的样式来解决问题。