vue.js - 为什么我的 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

It's not .

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