javascript - 对话框元素怪异黑色背景

Question

今天我遇到了一个非常奇怪且不常见的问题，想知道是否有人已经遇到过它以及它是否可以修复。问题是，正如您从下面我的代码中看到的那样，我的 Vue 组件只有一个来自 Element-UI 库的对话框元素。没什么奇怪的，只是当我加载组件时，对话框后面的颜色从正常的灰色调变为全黑，然后又变回灰色。我知道应该有一个动画从白色变为灰色，然后在它消失时变回白色。我已将我的代码放在此处并附有两个屏幕截图，以便您更好地理解。

<template>
  <div>
    <el-dialog
      title="Choose a month to pre-load"
      :visible.sync="dialog"
      width="40%"
      center>
      <p>You can choose to load now the data you are going to use throughout the session. Just pick a month</p>
      <div class="block">
        <el-date-picker
          v-model="choosenMonth"
          type="month"
          placeholder="Pick a month">
        </el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="loadMonth()">Confirm</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data() {
      return {
        dialog: true,
        choosenMonth: '',
      };
    }
  }
</script>

我省略了样式，因为我什至没有在对话框中使用它们。另外，如您所见，我将模板、脚本和样式作为一个组件写在同一个文件中。

如果有人甚至有最遥远的想法，请随时提出建议。非常感谢!

编辑

我添加了一个 gif 而不是两个图像，因为它代表了更好的情况。

Answer 1

我通过添加一个名为 modalAppendToBody = false 的 Prop 找到了解决方法。因此，这将添加关于父容器的对话框。以下是片段。

<el-dialog
        v-if="isInvite"
        :visible.sync="isInvite"
        :modalAppendToBody="false"
        >
        <h1>heelllooo</h1>
    </el-dialog>