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

Mar*_*arc 4 vue.js vue-component vuetify.js

我有一个 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>
`
});
Run Code Online (Sandbox Code Playgroud)

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

Tra*_*axo 8

不是

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


dag*_*lti 7

使用hide-overlay

更改为下面的代码

<v-dialog hide-overlay
 v-model="dialog" persistent max-width="600px">
        Help, I'm hidden behind this evil "overlay"!
    </v-dialog>
Run Code Online (Sandbox Code Playgroud)

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

  • 不正确,我*是*OP,我只想看看我的对话。 (2认同)