Question

我正在创建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>

仅给出该图标/功能的外观的想法：

任何帮助将不胜感激！

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>

Vuetify-如何正确嵌套v菜单，v徽章和v-btn

1 个答案: