javascript - Vuetify工具栏被抽屉导航遮盖

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

我可以使用非临时抽屉获得所需的视觉效果，但这不会对外部鼠标单击产生反应。当将其标记为临时时，它的行为正确，但在工具栏顶部视觉上呈现。

如何确保导航抽屉始终显示在工具栏下方，并且不会遮挡它，并且在用户单击外部时将其关闭？

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

最佳答案

好的，看来您正在体验的是预期的行为，因此这对于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

关于javascript - Vuetify工具栏被抽屉导航遮盖，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56851060/