Vuetify中v-menu背景透明、v-list覆盖导航栏问题如何修复？

修复方案 #

背景透明问题 #

该问题是因为你直接将固定高度加在v-list上，滚动时v-list内容超出了v-menu的默认自适应内容容器，透出了底层透明背景。只需在v-list外层嵌套一个v-card作为滚动容器，把高度、宽度、滚动属性都配置在v-card上即可，v-list不用额外设置宽高。

内容覆盖导航栏问题 #

属于z-index层级优先级问题，Vuetify默认导航栏v-app-bar的z-index为1000，给v-menu设置低于1000的z-index值即可避免层级超过导航栏。

修改后完整代码如下：

<v-menu offset-y z-index="999">
  <template v-slot:activator="{ on, attrs }">
    <v-btn icon v-bind="attrs" v-on="on">
      <v-badge :content="messages" :value="messages" color="green" overlap light>
        <v-icon>mdi-bell</v-icon>
      </v-badge>
    </v-btn>
  </template>

  <v-card height="300px" width="500px" style="overflow-y: auto;">
    <v-list three-line>
      <template v-for="(item, index) in items">
        <v-subheader v-if="item.header" :key="item.header" v-text="item.header"></v-subheader>

        <v-divider v-else-if="item.divider" :key="index" :inset="item.inset"></v-divider>

        <v-list-item v-else :key="item.title">
          <v-list-item-avatar>
            <v-img :src="item.avatar"></v-img>
          </v-list-item-avatar>

          <v-list-item-content>
            <v-list-item-title v-html="item.title"></v-list-item-title>
            <v-list-item-subtitle v-html="item.subtitle"></v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </template>
    </v-list>
  </v-card>
</v-menu>

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