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

Question

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

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

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

我该如何解决？

<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">

Answer 2

就我而言，在菜单上添加 max-height 对我有用。

有关详细信息，请参阅此 github 问题： https://github.com/vuetifyjs/vuetify/issues/3202

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

v-menu background become transparent and overlay navbar Vuetify

css

vue.js

vuetify.js