Vue TS项目中快速触发操作时重复Alert无法正常显示的解决方案咨询

我有一个基于Vue TypeScript、Tailwind和Daisy UI的项目，包含切换（链接/取消链接）元素、API调用及成功/错误提示框。目前所有功能正常，但存在一个问题：当快速触发切换操作时，若前一个提示框仍处于显示状态，新的提示框无法出现，必须等待前一个提示框消失后再次触发操作，新提示框才能正常显示。

现有代码 #

模板代码 #

<div
  class="alert alert-success z-[9999] fixed top-[-70px] left-0"
  id="alert-success"
>
  <span> {{ t('alerts.success') }}! {{ alertMsg }} </span>
</div>

样式代码 #

.show-alert {
 animation: mymove 5s ease-out forwards;
}
@keyframes mymove {
 0% {
  top: -70px;
 }
 30% {
  top: 10px;
 }
 70% {
  top: 10px;
 }
 100% {
  top: -70px;
  }
 }

函数代码 #

export  const showAlert = (response: boolean) => {
 var alertSuccess = document.getElementById(`alert-success`) as HTMLElement
 var alertError = document.getElementById('alert-error') as HTMLElement
 if (response) {
   alertSuccess.classList.add('show-alert')
 } else {
   alertError.classList.add('show-alert')
 }
 setTimeout(() => {
   alertSuccess.classList.remove('show-alert')
   alertError.classList.remove('show-alert')
 }, 5000)
}

已尝试的方案 #

• 每次触发函数时生成唯一ID，将提示框元素的id设为动态值:id="alert-success-${alertId}"，并在触发时递增alertId.value，但DOM获取到的元素为null，且需要处理z-index层级问题。
• 在showAlert函数开头先设置alertSuccess.style.display = 'none'隐藏旧提示框，再设置alertSuccess.style.display = 'block'显示新提示框，无效果。

问题根源 #

核心问题是复用了同一个DOM元素：当动画正在执行时，重复添加show-alert类不会重新触发CSS动画，而且定时器会覆盖之前的移除操作，导致状态混乱。同时原生DOM操作不符合Vue的响应式设计思路，容易出现元素获取失败的情况。

高效解决方案：响应式数组管理多提示框 #

改用Vue的响应式数组来管理每个提示框实例，每个提示框独立渲染、自动消失，完美解决快速触发的问题。

1. 定义提示框状态与类型 #

在组件中定义响应式数组和类型，统一管理所有提示框：

import { ref } from 'vue';

// 定义提示框类型
type AlertType = 'success' | 'error';
interface AlertItem {
  id: number;
  type: AlertType;
  message: string;
}

// 存储所有提示框的响应式数组
const alerts = ref<AlertItem[]>([]);
// 唯一ID计数器，确保每个提示框key唯一
let alertIdCounter = 0;

2. 编写提示框控制方法 #

替换原有的showAlert函数，改为向数组中添加新提示项，并自动定时移除：

const showAlert = (type: AlertType, message: string) => {
  const newAlert = {
    id: alertIdCounter++,
    type,
    message
  };
  alerts.value.push(newAlert);
  
  // 5秒后自动移除当前提示框
  setTimeout(() => {
    alerts.value = alerts.value.filter(alert => alert.id !== newAlert.id);
  }, 5000);
};

3. 修改模板渲染逻辑 #

用v-for循环渲染所有提示框，自动处理堆叠位置和样式：

<!-- 多提示框容器 -->
<div 
  v-for="alert in alerts" 
  :key="alert.id"
  :class="[
    'alert fixed left-0 z-[9999] animate-alert',
    alert.type === 'success' ? 'alert-success' : 'alert-error'
  ]"
  :style="{ top: `${10 + (alerts.indexOf(alert) * 60)}px` }"
>
  <span> 
    {{ alert.type === 'success' ? t('alerts.success') : t('alerts.error') }}! 
    {{ alert.message }} 
  </span>
</div>

4. 调整动画样式 #

保留原有动画逻辑，改为Tailwind自定义动画（更贴合项目技术栈）：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .animate-alert {
    animation: alertMove 5s ease-out forwards;
  }
}

@keyframes alertMove {
  0% { top: -70px; }
  30% { top: var(--top-offset); }
  70% { top: var(--top-offset); }
  100% { top: -70px; }
}

如果习惯原有的类名方式，也可以保留.show-alert，模板中直接添加该类即可（因为每个提示框是新DOM元素，添加类会直接触发动画）。

5. 调用方式 #

在API请求的成功/失败回调中调用：

// 操作成功时
showAlert('success', '链接已建立');
// 操作失败时
showAlert('error', '链接失败，请重试');

方案优势 #

• 每个提示框是独立DOM元素，快速触发时会依次堆叠显示，互不干扰
• 基于Vue响应式状态管理，避免原生DOM操作的各类问题
• 自动处理提示框的添加与移除，无需手动管理定时器和类名
• 通过索引计算top值实现堆叠效果，后添加的提示框自动显示在上方，无需手动调整z-index

内容的提问来源于stack exchange，提问作者Natalia