Vuetify2导航抽屉展开时溢出层级问题求助

核心问题分析 #

侧边栏展开时挤压其他元素，根源在于三个点：

1. permanent 属性会让导航抽屉占据固定布局空间，无法脱离文档流覆盖内容；
2. v-card 包裹抽屉，限制了它的定位层级和溢出行为；
3. 父组件的 row 流式布局强制子元素分配空间，导致抽屉展开时挤开内容。

具体修改方案 #

1. 修改导航抽屉组件（移除v-card+调整定位属性）

删除包裹抽屉的 v-card，给 v-navigation-drawer 添加 absolute 和 app 属性，让抽屉脱离文档流并适配应用高度：

<v-navigation-drawer
  v-model="drawer"
  :mini-variant.sync="mini"
  absolute
  left
  app
  z-index="9999"
>
  <v-list>
    <v-list-item class="px-2">
      <v-list-item-avatar>
        <v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
      </v-list-item-avatar>
      <v-spacer></v-spacer>
      <v-btn
        icon
        @click.stop="mini = !mini"
      >
        <v-icon>mdi-chevron-left</v-icon>
      </v-btn>
    </v-list-item>

    <v-list-item>
      <v-list-item-content>
        <v-list-item-title class="text-h6">
          {{ $auth.user?.name }}
        </v-list-item-title>
        <v-list-item-subtitle>{{ $auth.user.email }}</v-list-item-subtitle>
      </v-list-item-content>
    </v-list-item>
  </v-list>
</v-navigation-drawer>

2. 调整父组件布局（使用Vuetify标准布局结构）

替换 row 布局为Vuetify官方推荐的 v-main 包裹内容区域，避免流式布局的空间挤压：

<v-app>
  <!-- 导航抽屉组件 -->
  <navbar @change-tab="changeTab" :items="items"></navbar>
  
  <!-- 主内容区域 -->
  <v-main>
    <div class="container">
      <!-- 其他自定义组件 -->
    </div>
  </v-main>
</v-app>

关键修改说明 #

• 移除v-card：v-navigation-drawer 是独立布局组件，自带层级和样式，v-card 的包裹会限制其溢出和定位行为；
• absolute定位：让抽屉脱离文档流，展开时直接覆盖在页面内容上方，不影响其他元素布局；
• app属性：自动适配 v-app 高度，避免局部滚动或高度不足的问题；
• v-main布局：Vuetify标准主内容容器，自动配合导航抽屉定位，确保内容区域不会被迷你状态的抽屉遮挡，也不会被展开状态的抽屉挤压。

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