如何使用 Vuetify 显示多个通知？

Question

我有一个使用 Vuetify 的 Vue 3 应用程序。在一个组件中，我正在收听流媒体事件。对于每个新事件，我想在 x 秒后显示一个淡出的通知。我认为 Snackbar 组件是正确的选择。

我从以下代码开始

转载链接

<template>
  <v-app>
    <v-main>
      <v-btn @click="addNotification">New notification</v-btn>
      <div>{{ notifications }}</div>
      <v-snackbar 
          v-for="(notification, notificationIndex) in notifications" 
          :key="notificationIndex" 
          :model-value="true"
          location="top right"
          :style="`margin-top: ${notificationIndex * 60}px`"
          @update:model-value="removeNotification(notificationIndex)"
     >
        {{ notification }}
      </v-snackbar>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const notifications = ref([])

function addNotification() {
  notifications.value.push(new Date());
}

function removeNotification(notificationIndex) {
  notifications.value.splice(notificationIndex, 1);
}
</script>

但是有两件事我正在苦苦挣扎

• 如果可能的话，我想去掉我的自定义样式。我不知道小吃店是否会保持 ~60px 的高度。但是我找不到另一种方法来堆叠多个小吃店

• 按索引删除通知是错误的，因为

  splice

  修改了顺序。我只想从列表中“删除”过期的通知。

你对堆叠小吃店有什么想法吗？