Блог

Главная - Вопросы по программированию - фон v-меню становится прозрачным и накладывается на навигационную панель Vuetify

фон v-меню становится прозрачным и накладывается на навигационную панель Vuetify

#css #vue.js #vuetify.js

Вопрос:

Я создаю компонент уведомлений Facebook, используя v-меню и v-список.

Я установил высоту v-списка на 300 пикселей, потому что в противном случае список растянется по высоте, чтобы отобразить все содержимое.

Когда я прокручиваю компонент, фон становится прозрачным. Кроме того, содержимое наложения v-списка также отображается на панели навигации.

Как я могу это исправить?

Демонстрация кода

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

Ответ №1:

Самое простое решение-установить overflow-y: auto на свой v-list :

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

Комментарии:

1. Как вам приходит в голову переполнение?

2. И почему переполнение тоже работает?

3. Например, проверьте v-menu встроенные средства разработки хрома. Вы увидите это, не устанавливая overflow-y: auto v-list значение «Ваше v-list пребывание сверху» при прокрутке вниз. Таким v-list образом, он должен отвечать за обработку переполнения, чтобы сохранить свою позицию при прокрутке.

Метки: