vue3 elementui-plus el-dialog修改了body样式不生效问题解决方案

在Vue 3和Element Plus中，如果您在el-dialog组件打开时尝试修改body的样式而不生效，可能是由于样式层叠（specificity或者就绪时间）问题导致的。

解决方案通常涉及以下几点：

1. 确保您的样式选择器具有足够的特异性来超越Element Plus内置样式。可以通过增加选择器中类的数量或使用!important来实现，但应谨慎使用!important，因为它破坏了CSS特性的可维护性。
2. 使用Vue的动态绑定来根据对话框的状态动态更改样式。
3. 使用Vue的<style>标签中的scoped属性来限定样式只作用于当前组件，避免影响全局。
4. 如果您需要在打开对话框时改变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的样式可能会影响到整个应用，所以在实际项目中，应该尽量避免这种情况，尽可能使用组件级别的样式来解决问题。