Element-UI对话框加载时遮罩背景异常变黑问题求助

我之前开发Vue项目时也碰到过几乎一模一样的遮罩异常问题，大概率是Element-UI的过渡动画和组件初始化时机冲突导致的，给你几个实用的排查和修复思路：

• 延迟对话框的初始显示
  你现在在data里直接把dialog设为true，组件挂载时会立刻渲染对话框，但此时Element的遮罩过渡动画可能还没完全准备好，就会出现黑闪。可以通过mounted钩子配合延迟来规避：

  export default {
    data() {
      return {
        dialog: false, // 初始设为false
        choosenMonth: '',
      };
    },
    mounted() {
      // 等DOM渲染完成后，短延迟再显示对话框
      this.$nextTick(() => {
        setTimeout(() => {
          this.dialog = true;
        }, 100);
      });
    }
  }
  

  这个方法的核心是给过渡动画的CSS加载和初始化留足时间，100ms的延迟用户几乎感知不到，但能有效避免初始状态的异常。

• 排查全局样式冲突
  检查项目里的全局CSS有没有覆盖Element-UI遮罩层的样式，比如是否给.el-modal__mask或者父级元素加了强制的background-color（带!important），或者修改了transition属性。可以打开浏览器开发者工具，定位到遮罩元素，查看它的样式继承情况，排除自定义样式的干扰。

• 临时禁用遮罩动画排查问题
  给el-dialog添加modal-transition属性并设为空字符串，临时禁用遮罩的过渡动画，看看黑闪是否消失：

  <el-dialog 
    title="Choose a month to pre-load" 
    :visible.sync="dialog" 
    width="40%" 
    center
    :modal-transition="''"
  >
    <!-- 对话框内容 -->
  </el-dialog>
  

  如果黑闪消失，就可以确认是过渡动画的初始化问题，再回到第一个方案优化即可。

• 升级Element-UI版本
  部分旧版本的Element-UI确实存在遮罩动画的bug，如果你用的版本比较老，可以尝试升级到对应Vue版本的最新稳定版（Vue2对应element-ui，Vue3对应@element-plus/core），新版本通常会修复这类UI动画的小问题。

我当时项目里就是用延迟显示的方法解决的，亲测有效，你可以先试试这个方案~

内容的提问来源于stack exchange，提问作者Eugenio