时间戳

首页 > 解决方案 > 使 v-menu 标题保持固定在顶部

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

问题描述

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

标签： javascriptcssvue.jsvuetify.js

解决方案

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

这是一个带有工作演示的代码笔。

推荐阅读