我正在创建Vue / Nuxt应用程序,并且正在使用导航栏的用户通知功能。通知是一个图标,如果用户有通知,则应该有一个v形徽章,上面有一个红色小点。单击此图标后,将出现一个菜单下拉菜单,以显示用户的通知。我一直在阅读Vuetify菜单文档,尤其是本节谈论nested activators的部分。
当前未显示图标,无法激活菜单,但是显示了v徽章。在添加v菜单和嵌套激活器之前,它确实可以正确显示。
这是我当前的代码:
<v-menu>
<template v-slot:activator="{ on: menu, attrs }">
<v-badge
class="notification-badge"
color="secondary"
:content="currentUser.notifications.length || 0"
dot
:value="currentUser.notifications.length || 0">
<template v-slot:activator="{ on: badge }">
<v-btn
v-bind="attrs"
color="primary"
depressed
icon
v-on="{ ...badge, ...menu }">
<custom-icon
color="#4a4a4a"
height="20px"
name="bell"
width="20px" />p
</v-btn>
</template>
</v-badge>
</template>
<v-list
dense
elevation="1">
<v-list-item-group>
<v-list-item
v-for="item in currentUser.notifications"
:key="item.id"
two-line>
<v-list-item-content>
<v-list-item-title>{{ item.message }}</v-list-item-title>
<v-list-item-subtitle>{{ formatDate(item) }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-menu>
仅给出该图标/功能的外观的想法:
任何帮助将不胜感激!
答案 0 :(得分:0)
通过Absolutely Without Activator路线解决了它。
<template>
<v-badge
bottom
class="notification-badge"
color="secondary"
:content="currentUser.notifications.length || 0"
dot
left
overlap
:value="currentUser.notifications.length || 0">
<v-btn
depressed
icon
:ripple="false"
@click="openNotificationsMenu">
<custom-icon
color="#4a4a4a"
height="20px"
name="bell"
width="20px" />
</v-btn>
</v-badge>
<v-menu
v-model="showMenu"
absolute
offset-y
:position-x="menuPosition.x"
:position-y="menuPosition.y"
style="max-width: 400px">
<v-list
dense
elevation="1">
<v-list-item-group>
<v-list-item
v-for="item in currentUser.notifications"
:key="item.id"
two-line>
<v-list-item-content>
<v-list-item-title>{{ item.message }}</v-list-item-title>
<v-list-item-subtitle>{{ formatDate(item) }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-menu>
</template>
<script>
export default {
data: () => ({
showMenu: false,
menuPosition: {
x: 0,
y: 0
}
}),
methods: {
openNotificationsMenu (e) {
this.showMenu = true;
this.menuPosition.x = e.clientX;
if (e.clientY < 60) {
this.menuPosition.y = 60;
} else {
this.menuPosition.y = e.clientY;
}
}
}
}
</script>