时间戳

首页 > 解决方案 > 是否可以在临时 v-navigation-drawer 下方订购 v-snackbar？

vue.js - 是否可以在临时 v-navigation-drawer 下方订购 v-snackbar？

问题描述

我试图弄清楚如果导航抽屉设置了“临时”道具，是否可以将 v-navigation-drawer 放在 v-snackbar 上。通常，当 app 属性设置在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.jsvuetify.js

解决方案

一个 hacky 解决方法是将z-index抽屉的 设置为高于小吃店的 ( v-snackbarhas z-index: 1000)。

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

更新的代码笔

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>

推荐阅读