我有一个使用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修改了顺序。我只想从列表中"删除"过期的通知。

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