2

今天我遇到了一个非常奇怪且不常见的问题，想知道是否有人已经遇到过它以及是否可以修复。问题是，正如您在下面的代码中看到的那样，我的 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 而不是两个图像，因为它代表了更好的情况。

4

2 回答 2

1

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

<el-dialog
        v-if="isInvite"
        :visible.sync="isInvite"
        :modalAppendToBody="false"
        >
        <h1>heelllooo</h1>
    </el-dialog>
于 2021-03-23T04:52:08.873 回答
0

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

从上面的代码可以看出，我:visible.sync在 return data() 函数中立即将保存属性的变量设置为 true。这是非常错误的，因为设置变量时的对话框仍在渲染，因此它创建了这个凌乱的黑色背景。作为一种解决方法，我只是将变量设置为 false 开始并在mounted函数中将其设置为 true。

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

工作示例

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

于 2018-03-28T13:52:55.340 回答