使 v-menu 标题保持固定在顶部答案

【问题标题】：Make v-menu Title stay fixed on top使 v-menu 标题保持固定在顶部
【发布时间】：2020-08-08 15:20:12
【问题描述】：

所以我试图在我的 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> ，它也不起作用。有谁知道是什么原因造成的？

【问题讨论】：

您能否详细说明您希望互动做什么？
交互打开了一个固定高度的菜单，所以它是可滚动的。问题是当我滚动时标题没有固定在顶部......
设置类为content-class并应用position: fixed

标签： javascript css vue.js vuetify.js

【解决方案1】：

诀窍是使用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>

Here's a codepen with a working demo.

【讨论】：