代码之家 › 专栏 › 技术社区 › Marc

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

vuetify.js vue-component vue.js

1

Marc · 技术社区 · 7 年前

我有一个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

1 回复 | 直到 7 年前

1

4

Traxo 7 年前

It's not .

你只是在v-dialog里面没有背景色。你可以把 v-card
你刚刚用过 persistent
z-index: 202 ,并且覆盖有 201
box-shadow 使它看起来像是漂浮在它后面什么的,但这是因为它是透明的,你只需要设置背景色。

2

dagalti 7 年前

使用 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