如何区分Svelte Carbon组件中ToastNotification的超时与点击关闭事件？

问题背景 #

我基于Svelte和Carbon Components for Svelte开发应用，用错误store实现了一套错误通知机制：

• 系统抛出错误时，页面顶部弹出ToastNotification组件展示错误
• 同时配套一个可切换显示的侧边面板，列出所有未确认的错误
• 顶部通知和侧边面板的数据源完全共享同一个错误store

核心需求：

• 手动关闭：用户点击Toast右上角的关闭按钮（×）时，将对应错误标记为已确认并从store中移除
• 超时关闭：Toast因超时自动隐藏时，错误仍保留在store中，继续在侧边面板显示，直到用户在面板中手动关闭

但实际开发中发现，两种关闭操作触发的on:close事件无法区分——点击关闭按钮时，事件的detail.timeout居然也是true，看起来手动关闭逻辑也触发了超时流程，导致无法判断关闭原因。

解决方案 #

方法1：替换默认关闭按钮，直接绑定手动关闭逻辑 #

利用Carbon组件的closeButton slot，自定义关闭按钮并绑定专属的点击事件，绕过组件自带的on:close逻辑：

<script>
  import { ToastNotification } from 'carbon-components-svelte';
  import { errorStore } from './stores';

  // 处理手动关闭：标记错误为已确认并移除
  function handleManualErrorClose(errorId) {
    errorStore.remove(errorId);
  }
</script>

{#each $errorStore as error}
  <ToastNotification
    title="错误提示"
    subtitle={error.message}
    timeout={5000}
    <!-- 超时关闭时只处理Toast隐藏，不修改store -->
    on:close={() => {/* 仅处理UI隐藏逻辑 */}}
  >
    <!-- 自定义关闭按钮，绑定手动关闭事件 -->
    <button
      slot="closeButton"
      class="cds--toast-notification__close-button"
      on:click={() => handleManualErrorClose(error.id)}
      aria-label="关闭通知"
    >
      ×
    </button>
  </ToastNotification>
{/each}

这种方式最可靠，完全隔离了手动关闭和超时关闭的逻辑，不受组件内部实现的影响。

方法2：通过状态标记区分关闭类型 #

如果不想自定义按钮，可以给每个Toast维护一个状态变量，标记是否触发了手动关闭：

<script>
  import { ToastNotification } from 'carbon-components-svelte';
  import { errorStore } from './stores';

  // 记录当前Toast是否被手动关闭
  let isManualClose = false;

  function handleToastClose(error) {
    if (isManualClose) {
      // 手动关闭：移除错误
      errorStore.remove(error.id);
      isManualClose = false; // 重置状态
    }
    // 超时关闭：不做任何store操作，错误保留在侧边面板
  }
</script>

{#each $errorStore as error}
  <ToastNotification
    title="错误提示"
    subtitle={error.message}
    timeout={5000}
    on:close={() => handleToastClose(error)}
  >
    <button
      slot="closeButton"
      class="cds--toast-notification__close-button"
      on:click={() => isManualClose = true}
      aria-label="关闭通知"
    >
      ×
    </button>
  </ToastNotification>
{/each}

点击关闭按钮时先标记状态，在on:close事件中根据状态判断是否需要修改store。

方法3：直接监听内部关闭按钮的点击事件（不推荐） #

如果不想使用slot，可以通过DOM选择器获取Toast内部的默认关闭按钮，绑定点击事件来标记手动关闭状态：

<script>
  import { onMount } from 'svelte';
  import { ToastNotification } from 'carbon-components-svelte';
  import { errorStore } from './stores';

  let toastElement;
  let isManualClose = false;

  onMount(() => {
    // 获取Carbon默认的关闭按钮
    const closeBtn = toastElement?.querySelector('.cds--toast-notification__close-button');
    if (closeBtn) {
      closeBtn.addEventListener('click', () => {
        isManualClose = true;
      });
    }
  });

  function handleToastClose(error) {
    if (isManualClose) {
      errorStore.remove(error.id);
      isManualClose = false;
    }
  }
</script>

{#each $errorStore as error}
  <ToastNotification
    bind:this={toastElement}
    title="错误提示"
    subtitle={error.message}
    timeout={5000}
    on:close={() => handleToastClose(error)}
  />
{/each}

注意：这种方法依赖Carbon组件的DOM类名，若组件版本更新修改了类名，代码会失效，因此优先推荐前两种方案。

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