导航抽屉遮挡了 Vuetify 工具栏

Posted 2023-02-23

【中文标题】导航抽屉遮挡了 Vuetify 工具栏

【英文标题】：Vuetify toolbar obscured by navigation drawer

【发布时间】：2019-11-13 00:26:54

【问题描述】：

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

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

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

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

【问题讨论】：

问题是什么？

【参考方案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

【讨论】：

z-index，我相信工具栏的 z-index 为 3，所以我们将叠加层设置为 2。如果这有帮助，请不要忘记接受答案：P 哦，我也是检查了 vuetify 的下一个分支及其相同的行为，仅供参考

谢谢@Brad。我不是 100% 相信这应该是 Vuetify 在传递“剪辑”道具时的预期行为，但您的解决方案效果很好。我看到工具栏的 z-index 已经为 3，因此您的 custom_overlay 位于它下方。只要这在未来没有改变，那么应该没问题。