web-dev-qa-db-ja.com

Vuetifyダイアログがこの邪悪なオーバーレイの背後に隠れているのはなぜですか?

ダイアログを表示するだけの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

3
Marc

そうではない

V-dialog内の背景色はありません。 v-card内部など。
使用したばかりのpersistentプロパティは、オーバーレイクリックで閉じることができず、他の方法で閉じることができません。
ダイアログにはz-index: 202、およびオーバーレイには201どうやら、ダイアログはオーバーレイの上にあり、
だが box-shadowは背後に浮いているように見えますが、それは透明だからで、背景色を設定するだけです。

3
Traxo

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

1
dagalti