对话框元素怪异黑色背景

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

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

从上面的代码可以看出，我在 return data() 函数中立即将保存 :visible.sync 属性的变量设置为 true。这是非常错误的，因为设置变量时的对话框仍在渲染，因此它会创建这个凌乱的黑色背景。作为解决方法，我只是将变量设置为 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>

对话框元素怪异黑色背景

Dialog element weird black background

javascript

vue.js

element-ui

编辑