vue3中一个组件内有多个ElNotification通知,通知没有顺序怎么在最后一个通知结束后执行audio.pause()

在 Vue 3 中，如果 `ElNotification` 组件没有顺序，可以使用一个计数器来记录已经关闭的通知的数量，然后通过判断已经关闭的通知数量是否等于通知的总数量来确定最后一个通知是否已经关闭，从而执行 `audio.pause()` 方法。具体做法如下：

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` 生命周期中，初始化计数器 `closedCount` 为 0，用来记录已经关闭的通知的数量。

<script>
export default {
  data() {
    return {
      notifications: [
        { message: 'Notification 1' },
        { message: 'Notification 2' },
        { message: 'Notification 3' }
      ],
      closedCount: 0,
      audio: new Audio('path/to/audio.mp3')
    };
  },
  created() {
    this.$nextTick(() => {
      this.$el.querySelectorAll('.el-notification').forEach((el) => {
        el.addEventListener('close', () => {
          this.closedCount++;
          if (this.closedCount === this.notifications.length) {
            this.audio.pause();
          }
        });
      });
    });
  }
};
</script>

3. 在 `close` 事件的回调函数中，每次关闭一个通知，就将计数器 `closedCount` 加 1，然后判断已经关闭的通知数量是否等于通知的总数量，如果是，则执行 `audio.pause()` 方法。

这样，在最后一个通知关闭后，就会执行 `audio.pause()` 方法，停止播放音频。