如何以Svelte方式创建无需调用者定义标记的可堆叠Toast？

核心思路 #

不需要在调用组件里写任何<Toaster/>标记，通过模块级单例管理自动将通知容器挂载到页面DOM，直接暴露静态方法供全局调用。

具体实现步骤 #

1. 单个通知项组件（ToastItem.svelte） #

负责单个通知的样式、动画与生命周期：

<script>
  export let type = 'info';
  export let message;
  export let onClose;

  // 不同类型的样式映射
  const typeStyles = {
    info: 'bg-blue-100 text-blue-800 border-l-4 border-blue-500',
    warning: 'bg-yellow-100 text-yellow-800 border-l-4 border-yellow-500',
    error: 'bg-red-100 text-red-800 border-l-4 border-red-500'
  };

  let isVisible = true;

  // 自动关闭逻辑：3秒后隐藏，动画结束后销毁
  setTimeout(() => {
    isVisible = false;
    setTimeout(onClose, 300);
  }, 3000);
</script>

{#if isVisible}
<div class={`px-4 py-3 rounded-md shadow-md transition-all duration-300 ${typeStyles[type]}`}>
  {message}
</div>
{/if}

2. 通知管理器（toaster.js） #

作为单例模块，自动创建容器并管理通知队列：

import { mount } from 'svelte';
import ToastItem from './ToastItem.svelte';

// 创建全局通知容器并挂载到body
const container = document.createElement('div');
container.className = 'fixed top-4 right-4 flex flex-col gap-2 z-50';
document.body.appendChild(container);

// 存储所有活跃通知
let activeToasts = [];

// 添加通知的核心方法
function addToast(type, message) {
  const toastId = Date.now();
  // 挂载单个通知到容器
  const toastInstance = mount(ToastItem, {
    target: container,
    props: {
      type,
      message,
      onClose: () => removeToast(toastId)
    }
  });
  activeToasts.push({ id: toastId, instance: toastInstance });
}

// 移除并销毁通知
function removeToast(toastId) {
  activeToasts = activeToasts.filter(toast => {
    if (toast.id === toastId) toast.instance.$destroy();
    return toast.id !== toastId;
  });
}

// 对外暴露调用方法
export default {
  ShowInfo: (msg) => addToast('info', msg),
  ShowWarning: (msg) => addToast('warning', msg),
  ShowError: (msg) => addToast('error', msg)
};

3. 调用示例（无需任何组件标记） #

在任意Svelte组件中直接导入使用：

<script>
  import toaster from './toaster.js';

  function triggerToasts() {
    toaster.ShowInfo('操作已完成');
    toaster.ShowWarning('资源即将耗尽');
    toaster.ShowError('请求失败，请重试');
  }
</script>

<button on:click={triggerToasts} class="px-4 py-2 bg-gray-800 text-white rounded-md">
  弹出通知
</button>

关键细节说明 #

• 自动挂载容器：模块初始化时就将通知容器添加到页面body，完全不需要调用者手动编写标记
• 单例模式：利用JS模块的特性维持全局唯一的通知管理器，避免重复创建容器
• 自动清理：单个通知会自动隐藏并销毁，不会产生内存泄漏
• 样式自定义：可以替换typeStyles里的类名，适配项目的设计规范

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