Vuetify - 如何正确嵌套 v-menu、v-badge 和 v-btn

Question

我正在创建一个 Vue/Nuxt 应用程序，并且正在开发 Navbar 的用户通知功能。通知是一个图标，如果用户有通知，应该有一个 v-badge 作为一个小红点。单击此图标时，应下拉菜单以显示用户的通知。我一直在阅读 Vuetify 菜单文档，特别是关于 nested activators 的部分。

目前图标不显示，也无法激活菜单，但 v-badge 会显示。在添加 v-menu 和嵌套激活器之前它确实显示正确。

这是我当前的代码：

      <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>

只是为了让大家了解一下这个图标/功能的样子：

任何帮助将不胜感激！

Answer 1

通过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>