javascript - 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