是否可以在临时 v-navigation-drawer 下方订购 v-snackbar？答案

【问题标题】：Is it possible to order a v-snackbar below the temporary v-navigation-drawer?是否可以在临时 v-navigation-drawer 下方订购 v-snackbar？
【发布时间】：2021-06-07 11:41:58
【问题描述】：

如果导航抽屉设置了“临时”道具，我正在尝试确定是否可以将 v-navigation-drawer 放置在 v-snackbar 上。通常，当 app prop 设置在snackbar 上时，snackbar 会尊重导航抽屉，但当抽屉具有临时属性时则不会。

我可以理解有时这可能是一种预期的行为，但我想知道是否有可能以任何方式颠倒它们的顺序。

在移动设备上查看应用时，这可能会成为一个问题，例如：

在上面的示例中，snackbar 完全覆盖了导航抽屉中的第一个选项，并使其无法访问，直到snackbar 超时或被关闭。

我尝试利用 v-snackbar 上的海拔道具和 v-navigation-drawer 上的海拔类，但这似乎对解决问题没有帮助。

这是一个显示问题的独立代码笔： Codepen

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>
<div id="app">
  <v-app>
    <v-navigation-drawer temporary app v-model="drawer">
      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>

【问题讨论】：

如果零食棒在抽屉下面，那么用户将如何阅读写在零食棒上的信息？

标签： vue.js vuetify.js

【解决方案1】：

一个 hacky 解决方法是将抽屉的 z-index 设置为高于小吃店的（v-snackbar 具有 z-index: 1000）。

<v-navigation-drawer temporary app :style="{ 'z-index': 2000 }">

updated codepen

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>
<div id="app">
  <v-app>
    <v-navigation-drawer temporary app v-model="drawer" :style="{ 'z-index': 2000 }">
      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 Not 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>

【讨论】：