Question

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

我可以使用非临时抽屉获得所需的视觉效果，但这对外部鼠标单击没有反应。当它标记为临时时，它的行为正确，但是在工具栏的顶部具有视觉效果。

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

  <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索引以位于页面和抽屉之间。然后只需应用@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

Vuetify工具栏被导航抽屉遮盖

1 个答案: