如何在Vuetify导航抽屉打开时保留顶部标题与菜单图标

解决方案 #

完全可以通过Vuetify原生属性实现该需求，不需要额外自定义顶部标题和图标，核心是调整导航抽屉的定位、遮罩属性，以及提升顶部App Bar的层级，修改点如下：

核心问题原因

当前使用temporary属性的导航抽屉，默认会生成全屏遮罩层，且导航抽屉的默认层级高于App Bar，所以顶部的标题和图标会被遮挡。

修改方案（两种场景可选，均为Vuetify原生能力）

场景1：抽屉从App Bar下方滑出（更符合主流交互规范）

仅需要修改两处组件属性即可：

1. 给v-app-bar添加Vuetify原生工具类z-index-10，提升层级确保不会被遮挡
2. 给v-navigation-drawer添加top="64px"（默认App Bar高度为64px，自定义高度可调整为对应数值）、no-overlay属性，移除全屏遮罩并让抽屉避开顶部区域
   修改后的模板代码如下：

<template>
  <v-card height="100%" flat>
    <v-app-bar elevation="0" class="transparent z-index-10">
      <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
      <v-toolbar-title>{{ Title }}</v-toolbar-title>
    </v-app-bar>

    <v-navigation-drawer v-model="drawer" absolute temporary top="64px" no-overlay>
      <v-list nav dense>
        <v-list-item-group
          v-model="group"
          active-class="blue--text text--accent-4"
        >
          <v-list-item @click="setTitle(TitleList[0])" to="/home">
            <v-list-item-icon>
              <v-icon>mdi-home</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item>

          <v-list-item @click="setTitle(TitleList[1])" to="/about">
            <v-list-item-icon>
              <v-icon>mdi-account</v-icon>
            </v-list-item-icon>
            <v-list-item-title>About</v-list-item-title>
          </v-list-item>

          <v-list-item @click="setTitle(TitleList[2])" to="/investments">
            <v-list-item-icon>
              <v-icon>mdi-currency-usd</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Investments</v-list-item-title>
          </v-list-item>

          <v-list-item @click="setTitle(TitleList[3])" to="/contact">
            <v-list-item-icon>
              <v-icon>mdi-email</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Contact</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
    <v-divider></v-divider>
    <router-view></router-view>
  </v-card>
</template>

场景2：抽屉从顶部滑出，App Bar固定悬浮在最上层

仅需要给v-app-bar添加z-index-10类，同时给v-navigation-drawer添加no-overlay属性即可，无需调整抽屉的top值，抽屉滑出后App Bar仍然会显示在最上层。

属性说明

所有用到的属性均为Vuetify官方原生提供，符合规范：

• z-index-10：Vuetify官方提供的层级工具类，用于快速调整元素层级
• top：v-navigation-drawer原生支持的定位属性，用于设置抽屉距离顶部的偏移量
• no-overlay：v-navigation-drawer原生属性，用于关闭默认的全屏遮罩层

内容的提问来源于stack exchange，提问作者Andrew White