v-menu 背景变得透明并覆盖导航栏 Vuetify

Question

我正在使用 v-menu 和 v-list 制作 Facebook 的通知组件。

我将 v-list 的高度设置为 300px，因为如果没有，列表将拉伸高度以显示所有内容。

当我滚动组件时，背景变得透明。此外，v-list 也可以在导航栏上覆盖内容。

我该如何解决？

Code demo

<v-menu offset-y>
  <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-list three-line height="300px" width="500px">
    <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-menu>

Answer 1

最简单的解决方案是将overflow-y: auto 设置为您的v-list：

<v-list style="overflow-y: auto" three-line height="300px" width="500px">