Vue - 如何在图标点击时显示应用栏的下拉菜单？

Question

我有一个 appBar(mobile)，上面有一些图标。当我单击带有通知列表的通知图标（如在许多移动应用程序中看到的那样）时，我想显示一个下拉菜单。我对 Vue 完全陌生。

            <template>
        <div>
            <!-- <v-app-bar color="deep-purple accent-4" dense dark> -->
            <v-menu>
            <template v-slot:activator="{ on: activationEvents }">
                <v-btn icon v-bind="attrs" v-on="activationEvents">
                <div class="notification" @click="showNotif" v-bind="attrs" v-on="on">
                    <fas class="notif-icon" :icon="['far', 'bell']" />
                    <span class="count" v-if="notification.unreadCount != 0">{{
                    notification.unreadCount.toLocaleString()
                    }}</span>
                </div>
                </v-btn>
            </template>

            <v-list>
                <v-list-item
                v-for="dessert in desserts"
                :key="dessert"
                @click="() => {}"
                >
                <v-list-item-title> {{ dessert.name }}</v-list-item-title>
                </v-list-item>
            </v-list>
            </v-menu>
            <!-- </v-app-bar> -->
        </div>
        </template>

            export default {
        data() {
            return {
            toggleSelect: false,
            desserts: [
                {
                name: "Frozen Yogurt",
                calories: 159,
                fat: 6.0,
                },
                {
                name: "Ice cream sandwich",
                calories: 237,
                fat: 9.0,
                },
                {
                name: "Eclair",
                calories: 262,
                fat: 16.0,
                },
                {
                name: "Cupcake",
                calories: 305,
                fat: 3.7,
                },
                {
                name: "Gingerbread",
                calories: 356,
                fat: 16.0,
                },
                {
                name: "Jelly bean",
                calories: 375,
                fat: 0.0,
                },
                {
                name: "Lollipop",
                calories: 392,
                fat: 0.2,
                },
                {
                name: "Honeycomb",
                calories: 408,
                fat: 3.2,
                },
                {
                name: "Donut",
                calories: 452,
                fat: 25.0,
                },
                {
                name: "KitKat",
                calories: 518,
                fat: 26.015,
                },
            ],
            notification: { unreadCount: 0 },
            };
        },

目前有2个问题：

无需点击图标即可直接显示列表

列表显示在应用栏上/中（而不是显示在应用栏下方）

Answer 1

半个答案：菜单道具

offset-y

将打开下面的菜单。例如

<v-menu
    bottom
    left
  offset-y="offset-y"
>

此外，

nudge-bottom

属性将允许您将菜单向下移动特定数量。例如

<v-menu
    bottom
    left
    nudge-bottom="40"
>

https://v2.vuetifyjs.com/en/api/v-menu/#props