对话框元素奇怪的黑色背景

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

我终于找到了导致这种异常行为的问题。

从上面的代码中可以看出，我将在返回data（）函数中立即保存:visible.sync属性的变量设置为true。这是非常错误的，因为设置变量时的对话框仍在渲染，因此它会创建这个混乱的黑色背景。作为一种解决方法，我只需将varible设置为false，然后在mounted函数中将其设置为true。

<script>
  export default {
    data(){
      dialog : false,
      .....
      mounted: function() {
        this.dialog = true;
      }
    }
  }
</script>

这应解决有关奇怪行为的任何问题。希望这可以帮助将来的某个人。干杯！

Answer 2

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

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