我有一个appBar(移动的),上面有一些图标。我想在点击通知图标(在许多移动应用程序中都可以看到)时显示一个下拉列表,其中有通知列表。我对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 },
};
},
目前存在两个问题:
列表直接显示,甚至无需单击图标
列表显示在应用程序栏上/中(而不是显示在应用程序栏下方)
1条答案
按热度按时间2ul0zpep1#
半个答案:菜单 prop
offset-y
将打开下面的菜单。另外,
nudge-bottom
属性允许您将菜单向下移动一个特定的量。https://v2.vuetifyjs.com/en/api/v-menu/#props