v-dialog 的自定义 z-index

Question

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

我不能轻易更改标题的z-index，因为这是一个旧代码库。所以我尝试像这样覆盖对话框的 z-indexes：

.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;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.30/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <div class='banner'>Banner</div>
    <div style="height:30px;">&nbsp;</div>
    <v-dialog v-model='dialog'>
      <template v-slot:activator="{ on, attrs }">
        <v-btn v-bind="attrs" v-on="on">Show</v-btn>
      </template>
      <v-card>
        <v-card-text>
          Click outside should close.
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-app>
</div>

Answer 1

This Vuetify update 让事情变得简单：

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

对话框、背景和内容将自动正确设置 z-indexes，并且“点击外部关闭”也可以正常工作。

Answer 2

这是一种 hack，但您可以向基于 v-dialog 模型触发的横幅添加一个类，如下所示：

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;
}

/** Add a class to reset the z-index to inherit (or whatever works with your code base) **/
.banner-dialog {
    z-index: inherit;
}

/** I removed the z-index from the core Vue component classes. **/

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.30/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    // Add a class here to trigger based on the v-dialog model
    <div :class="{ 'banner-dialog': dialog }" class='banner'>Banner</div>
    <div style="height:30px;">&nbsp;</div>
    <v-dialog v-model='dialog'>
      <template v-slot:activator="{ on, attrs }">
        <v-btn v-bind="attrs" v-on="on">Show</v-btn>
      </template>
      <v-card>
        <v-card-text>
          Click outside now closes!
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-app>
</div>