Сделайте так, чтобы заголовок v-меню оставался фиксированным сверху - PullRequest
Новая
       7

Сделайте так, чтобы заголовок v-меню оставался фиксированным сверху

3 голосов
/ 25 апреля 2020

Итак, я пытаюсь создать компонент уведомления в моем приложении VueJS, но я пытаюсь получить фиксированный заголовок меню, которое открывается при нажатии.

Вот код компонента : 

<template>
 <v-menu
  max-width="400px"
  max-height="300px"
  allow-overflow
  v-model="menu"
  :close-on-content-click="false"
  :nudge-width="200"
  offset-x
>
  <template v-slot:activator="{ on }">
    <v-icon v-on="on" @click="menu = true">mdi-bell</v-icon>
  </template>

  <v-card>
    <v-list>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title style="position:fixed;" class="text-center"
            >This Should Be Fixed</v-list-item-title
          >
        </v-list-item-content>
      </v-list-item>
    </v-list>

    <v-divider></v-divider>

    <v-list>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
    </v-list>
    <v-btn text @click="menu = false">Cancel</v-btn>
    <v-btn color="primary" text @click="menu = false">Save</v-btn>
  </v-card>
</v-menu>

Я пробовал <v-app-bar fixed>Title</v-app-bar>, который тоже не работает. У кого-нибудь есть идеи, что вызывает это?

1 Ответ

3 голосов
/ 25 апреля 2020

Хитрость заключается в том, чтобы использовать v-card для содержимого вашего меню и установить фиксированную высоту и overflow-y: scroll для содержимого: 

<v-menu
  max-width="400px"
  v-model="menu"
  :close-on-content-click="false"
  :nudge-width="200"
  offset-x
>
  <template v-slot:activator="{ on }">
    <v-icon v-on="on" @click="menu = true">mdi-bell</v-icon>
  </template>
  <v-card scrollable>
    <v-card-title>
      This Should Be Fixed
    </v-card-title>
    <v-card-text style="height: 280px; overflow-y: scroll"> <!--THIS IS IMPORTANT!-->
      <v-list>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
      </v-list>
    </v-card-text>
    <v-card-actions>
      <v-btn text @click="menu = false">Cancel</v-btn>
      <v-btn color="primary" text @click="menu = false">Save</v-btn>
    </v-card-actions>
  </v-card>
</v-menu>

Вот кодовая ручка с рабочим демо .

...