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

Question

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

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

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

Answer 1

不是。

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

Answer 2

使用hide-overlay

更改为下面的代码

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

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