Question

我有一个很好的组件，应该只显示一个对话框。不幸的是，一个邪恶的覆盖物已经占据了整个域。如何克服半透明黑暗的力量？

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对话框中根本没有背景色。例如，您可以将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

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

2 个答案: