如何让带temporary属性的v-navigation-drawer显示在v-snackbar之上？

你遇到的这个问题确实是Vuetify组件预设层级导致的：当v-navigation-drawer启用temporary属性时，它的默认z-index会低于带app属性的v-snackbar，所以后者会直接遮挡前者，而Vuetify内置的组件避让逻辑只对非temporary的抽屉生效。调整elevation属性没用是因为elevation主要控制阴影效果，无法覆盖框架对这两个组件的预设层级规则。

解决方案：手动提升抽屉的z-index #

我们可以通过自定义CSS类给temporary抽屉设置更高的z-index，确保它能显示在snackbar上方。Vuetify中带app的snackbar默认z-index是999，所以我们只需要给抽屉设置一个更高的值（比如1000）即可。

修改后的完整代码示例：

new Vue({
  el: '#app',
  data() {
    return {
      drawer: false,
      snackbar: false
    };
  },
  vuetify: new Vuetify(),
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet" />
<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.x/dist/vuetify.js"></script>

<style>
.drawer-over-snackbar {
  z-index: 1000 !important;
}
</style>

<div id="app">
  <v-app>
    <v-navigation-drawer temporary app v-model="drawer" class="drawer-over-snackbar">
      Hello I'm the Drawer
    </v-navigation-drawer>
    <v-app-bar app fixed>
      <v-btn @click="drawer = !drawer; snackbar = true">
        Trigger
      </v-btn>
    </v-app-bar>
    <v-snackbar app top left v-model="snackbar">
      I'm Blocking the Drawer
      <template v-slot:action="{ attrs }">
        <v-btn dark icon v-bind="attrs" @click="snackbar = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </template>
    </v-snackbar>
  </v-app>
</div>

关键说明： #

• 我们给v-navigation-drawer添加了自定义类drawer-over-snackbar，并通过CSS强制设置它的z-index为1000（比snackbar的默认值999高）。
• 使用!important是为了确保这个样式能覆盖Vuetify组件内部的预设样式，避免被框架的优先级规则覆盖。

这样修改后，当你同时触发抽屉和snackbar时，抽屉就会显示在snackbar上方，不会出现选项被遮挡无法点击的问题了。

内容的提问来源于stack exchange，提问作者Ceiling Gecko