为啥我的 vuetify 对话框隐藏在这个邪恶的覆盖层后面？

Posted 2023-02-22

【中文标题】为啥我的 vuetify 对话框隐藏在这个邪恶的覆盖层后面？

【英文标题】：Why is my vuetify dialog hidden behind this evil overlay?为什么我的 vuetify 对话框隐藏在这个邪恶的覆盖层后面？

【发布时间】：2019-08-09 07:31:13

【问题描述】：

我有一个 vuetiful 组件，它应该只显示一个对话框。不幸的是，邪恶的覆盖已经接管了宇宙。如何克服半透明黑暗的力量？

Vue.component('step-form', 
    data: function() 
        return 
            dialog: false
        
    ,
    methods: 
        showDialog() 
            this.dialog=!this.dialog;
        
    ,
    template: `
    <v-dialog v-model="dialog" persistent max->
        Help, I'm hidden behind this evil "overlay"!
    </v-dialog>
`
);

https://codepen.io/anon/pen/jJpWGx

【问题讨论】：

您可能已经注意到这一点，但是将对话框的内容包装在v-card 组件中似乎会将覆盖层放在对话框后面。我不知道为什么。

@DelenaMalan 提到用 v-card 包装对话框内容将覆盖 <v-dialog v-model="dialog" persistent max-width="600px"> <v-card> Help, I'm hidden behind this evil "overlay"!</v-card> </v-dialog>

谢谢大家 - 充其量是一个未记录的解决方法 - 最坏的情况是一个邪恶的错误？

@DelenaMalan v-card 没有把对话框放在覆盖层后面，它已经在它后面了。它只是看起来不是由于阴影，而是透明和持久的。这不是一个错误。看我的回答。如果有什么不清楚的地方请告诉我。

【参考方案1】：

It's not.

v-dialog 中根本没有背景颜色。例如，您可以将v-card 放在里面。 您刚刚使用了 persistent 属性，这使您无法在覆盖单击时关闭它，并且没有其他方法可以关闭它。 所以对话框有z-index: 202，而覆盖显然有201，所以对话框在覆盖之上， 但是box-shadow 让它看起来像是漂浮在它后面什么的，但这是因为它是透明的，你只需要设置背景颜色。

【讨论】：

谢谢，你是对的。我最初在对话框中有一个 <v-card-title> 元素 - 我错过了 <v-card> 元素，一切都是灰色的。

好主意，效果很好，感谢 traxo 提供的出色解决方案

【参考方案2】：

使用hide-overlay

改成下面的代码

<v-dialog hide-overlay
 v-model="dialog" persistent max->
        Help, I'm hidden behind this evil "overlay"!
    </v-dialog>

文档：https://vuetifyjs.com/en/components/dialogs

【讨论】：

Okaaay ...这似乎是一种解决方法。当然，覆盖应该在对话框后面。

不正确，因为 op 似乎想要保留叠加层，而不是隐藏它。

不正确，我是 OP，我只想看看我的对话。