对话框元素奇怪的黑色背景
对话框元素奇怪的黑色背景
提问于 2018-03-23 14:36:38
今天我遇到了一个非常奇怪的问题，我想知道是否有人已经遇到了它，它是否是可修复的。问题是，正如您可以从下面的代码中看到的那样，我的Vue组件有一个来自element库的对话框元素。没有什么奇怪的，只是当我加载组件时，对话框后面的颜色会从正常的灰色调变成完全的黑色，然后返回到灰色的颜色。我知道应该有一个动画从白色到灰色，回到白色时，它消失了。为了让您更好地理解，我已经将我的代码和两个截图放在一起了。
<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，而不是这两个图像，因为它代表了更好的情况。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-03-28 13:52:55
我终于发现了导致这种不正常行为的问题。
正如您可以从上面的代码中看到的那样，我将包含:visible.sync属性的变量立即设置为true。这是非常错误的，因为对话框在设置变量时，仍然呈现，因此它创建了这个混乱的黑色背景。作为解决办法，我只是将varible设置为false，并在mounted函数中将其设置为true。
<script>
export default {
data(){
dialog : false,
.....
mounted: function() {
this.dialog = true;
}
}
}
</script>
这应能解决任何有关奇怪行为的问题。希望这能对将来的人有所帮助。干杯!
Stack Overflow用户
发布于 2021-03-23 04:52:08
通过添加一个名为modalAppendToBody = false的道具，我找到了一项工作。因此，这将添加有关父容器的对话框。下面是片段。
<el-dialog
v-if="isInvite"
:visible.sync="isInvite"
:modalAppendToBody="false"
>
<h1>heelllooo</h1>
</el-dialog>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49452138
复制相关文章
相似问题
腾讯云开发者
