Javascript Vuetify工具栏被导航抽屉遮挡

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

我可以用一个非临时抽屉获得我想要的视觉效果，但这对外面的鼠标点击没有反应。将其标记为临时时，其行为正确，但在工具栏顶部呈现视觉效果

如何确保导航抽屉始终呈现在工具栏下方，并且不会使其模糊，并且在用户单击外部时被取消

看

---

好的，看来您所经历的是预期的行为，所以这不是Vuetify的问题，但是您可以通过添加自己的覆盖来实现所描述的

只需添加您自己的覆盖，仅当存在抽屉时显示，为其提供相关样式以填充页面，并在页面和抽屉之间设置正确的z索引。然后只需应用@click将drawer设置为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;
}

.自定义覆盖{
位置：固定；
高度：100vh；
宽度：100%；
背景：rgba（50,50,50,0.5）；
z指数：2；
}

请参见此处的示例：

---

问题是什么？z索引，我认为工具栏的z索引是3，所以我们将覆盖设置为2。ps如果这有帮助，别忘了接受答案：P哦，我还检查了vuetify的下一个分支，它的行为也一样，只是一个FYIThanks@Brad。我并不是100%相信，当通过“clipped”道具时，Vuetify会出现这种预期行为，但您的解决方案运行良好。我看到工具栏的z索引已经是3了，所以你的自定义_覆盖层就在它下面。只要这一点在未来不会改变，那么就应该可以了。

  new Vue({
    el: "#app",
    data: () => ({
      drawer: false,
      temporary: 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;
}