v-dialog 的自定义 z-index

Question

当我使用 Vuetify 时v-dialog，我的页面标题位于对话框顶部。例如：

我无法轻易更改标题，z-index因为这是旧的代码库。所以我尝试像这样覆盖对话框的 z 索引：

.v-overlay { z-index: 20001 !important; }
.v-dialog__content { z-index: 20002 !important; }

这在视觉上有效，但现在“单击外部关闭”不起作用。这是一个例子：

.v-overlay { z-index: 20001 !important; }
.v-dialog__content { z-index: 20002 !important; }

Vue.use(Vuetify);

var vm = new Vue({
  vuetify : new Vuetify(),
    el: "#app",
  data: { dialog: false },
});

.banner {
  position:fixed;
  left:0;
  right:0;
  height:20px;
  background-color:red;
  /* z-index:1000; */
}

/** This fixes the banner, but now it won't close. **/
.v-overlay {
  z-index: 1001 !important;
}
.v-dialog__content {
  z-index: 1002 !important;
}

Answer 1

这次 Vuetify 更新让一切变得简单：

<v-dialog v-model='dialog' style='z-index:20001;'>

对话框、背景和内容将自动正确设置 z 索引，并且“单击外部关闭”也有效。