Почему мой диалог vuetify скрыт за этим злым наложением?

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

Это не .

У вас просто нет цвета фона внутри 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