vue3中一个组件内有多个ElNotification通知怎么确定那个通知是最后结束的通知

在 Vue 3 中，可以通过给 `ElNotification` 组件设置 `id` 属性来确定那个通知是最后结束的通知。具体做法如下：

1. 在模板中给每个 `ElNotification` 组件设置一个唯一的 `id` 属性，可以使用 `v-for` 循环生成多个组件，每个组件的 `id` 属性可以设置为循环变量。

<template>
  <div>
    <el-notification v-for="(item, index) in notifications" :key="index" :id="'notification-' + index">
      {{ item.message }}
    </el-notification>
  </div>
</template>

2. 在组件的 `created` 生命周期中监听 `ElNotification` 组件的 `close` 事件，并记录关闭的组件的 `id`。

<script>
export default {
  data() {
    return {
      notifications: [
        { message: 'Notification 1' },
        { message: 'Notification 2' },
        { message: 'Notification 3' }
      ],
      lastClosedId: null
    };
  },
  created() {
    this.$nextTick(() => {
      this.$el.querySelectorAll('.el-notification').forEach((el) => {
        el.addEventListener('close', () => {
          this.lastClosedId = el.id;
        });
      });
    });
  }
};
</script>

3. 在需要知道最后结束的通知的地方使用 `lastClosedId` 属性来获取最后关闭的通知的 `id`。

<template>
  <div>
    <button @click="showNotification">Show Notification</button>
    <button @click="getLastClosedId">Get Last Closed Id</button>
  </div>
</template>

<script>
export default {
  methods: {
    showNotification() {
      this.notifications.push({ message: 'Notification ' + (this.notifications.length + 1) });
    },
    getLastClosedId() {
      console.log('Last closed notification id:', this.lastClosedId);
    }
  }
};
</script>

这样，当有多个 `ElNotification` 组件时，就可以通过记录最后关闭的组件的 `id` 来确定那个通知是最后结束的通知。