导航抽屉遮挡了 Vuetify 工具栏

Question

我想要一个顶部有一个固定工具栏，下方有一个左侧导航抽屉的应用程序布局。此外，导航抽屉应表现为“临时”，即用户可以在抽屉外单击以将其关闭。

我可以使用非临时抽屉获得我想要的视觉效果，但这不会对外部的鼠标点击做出反应。当它被标记为临时时，它的行为正确，但在视觉上呈现在工具栏的顶部。

如何确保导航抽屉始终呈现在工具栏下方并且不会遮挡它并且在用户点击外部时被关闭？

见this codepen example

  <div id="app">
    <v-app id="inspire" >
      <v-navigation-drawer clipped app :temporary="temporary" v-model="drawer" hide-overlay>
      <v-list dense>
        <v-list-tile>I must respect the Toolbar and appear below</v-list-tile>
        <v-list-tile>Home 1</v-list-tile>
        <v-list-tile>Home 2</v-list-tile>
        <v-list-tile>Home 3</v-list-tile>
        <v-list-tile>Home 4</v-list-tile>
      </v-list>
    </v-navigation-drawer>

    <v-toolbar color="blue darken-3" dark app clipped-left>
      <v-btn @click="drawer = !drawer">Show drawer</v-btn>
      <v-toolbar-title>Toolbar should be always on top!</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-switch v-model="temporary" label="Make drawer temporary" hide-details/>
    </v-toolbar>

    <v-content>
      <v-container fluid fill-height>
        nothing to see here
      </v-container>
    </v-content>

  </v-app>
</div>

javascript：

  new Vue({
    el: "#app",
    data: () => ({
      drawer: false,
      temporary: false
    })
  });

Answer 1

好的，看来您遇到的是预期的行为，所以这不是 Vuetify 的问题，但是您可以通过添加自己的叠加层来实现您所描述的。

只需添加您自己的叠加层，该叠加层仅在抽屉存在时显示，为其提供相关样式以填充页面并在页面和抽屉之间提供正确的 z-index。然后只需应用 @click 将抽屉设置为 false。

<div v-if="drawer" class="custom_overlay" @click="drawer = !drawer"></div>

.custom_overlay {
    position: fixed;
    height: 100vh;
    width: 100%;
    background: rgba(50,50,50,0.5);
    z-index:2;
}

请参见此处的示例： https://codepen.io/anon/pen/YoLwgv