fix(notification): 修复 NotifyPlugin.close 错误触发 onCloseBtnClick 的问题 (#5958)

* fix(notification): 修复 NotifyPlugin.close 错误触发 onCloseBtnClick 的问题

onCloseBtnClick 事件本应仅在用户手动点击关闭按钮时触发。但在之前的实现中，通过代码调用 NotifyPlugin.close() 方法同样会错误地触发该事件。
这会导致开发者在 onCloseBtnClick 回调中编写的、仅针对用户行为的逻辑被意外执行，从而引发潜在的 Bug。
新增一个 onClose 事件，将程序化关闭和用户手动关闭的逻辑进行解耦。

现在，NotifyPlugin.close() 只会触发内部的 onClose 来销毁组件，确保了 onCloseBtnClick 行为的正确性。

BREAKING CHANGE: 调用 NotifyPlugin.close() 将不再触发 onCloseBtnClick 事件。

* refactor(notification): 移除演示代码

* chore: complete docs change

* chore: stash changelog [ci skip]

* chore: typo

---------

Co-authored-by: baozhangjie <[email protected]>
Co-authored-by: Uyarn <[email protected]>
Co-authored-by: tdesign-bot <[email protected]>

Author: 4 people

packages/components/notification/notification-list.tsx

@@ -73,6 +73,12 @@ export default defineComponent({
           }
           return remove(index);
         },
+        onClose: () => {
+          if (item.onClose) {
+            item.onClose();
+          }
+          return remove(index);
+        },
       };
     };
 

packages/components/notification/notification.en-US.md

@@ -14,13 +14,15 @@ footer | String / Slot / Function | - | Typescript：`string \| TNode`。[see mo
 icon | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 theme | String | info | options: info/success/warning/error。Typescript：`NotificationThemeList` `type NotificationThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/notification/type.ts) | N
 title | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+onClose | Function |  | Typescript：：`() => void`<br/> the callback event of NotificationPlugin.close | N
 onCloseBtnClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onDurationEnd | Function |  | Typescript：`() => void`<br/> | N
 
 ### Notification Events
 
 name | params | description
 -- | -- | --
+close |  \- | the callback event of NotificationPlugin.close
 close-btn-click | `(context: { e: MouseEvent })` | \-
 duration-end | \- | \-
 

packages/components/notification/notification.md

@@ -27,13 +27,15 @@ footer | String / Slot / Function | - | 用于自定义底部内容。TS 类型
 icon | Boolean / Slot / Function | true | 用于自定义消息通知前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 theme | String | info | 消息类型。可选项：info/success/warning/error。TS 类型：`NotificationThemeList` `type NotificationThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/notification/type.ts) | N
 title | String / Slot / Function | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+onClose | Function |  | TS 类型：`() => void`<br/>调用 NotificationPlugin.close 的事件回调 | N
 onCloseBtnClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击关闭按钮时触发 | N
 onDurationEnd | Function |  | TS 类型：`() => void`<br/>计时结束时触发 | N
 
 ### Notification Events
 
 名称 | 参数 | 描述
 -- | -- | --
+close |  \- | 调用 NotificationPlugin.close 的事件回调
 close-btn-click | `(context: { e: MouseEvent })` | 点击关闭按钮时触发
 duration-end | \- | 计时结束时触发
 

packages/components/notification/notification.tsx

@@ -30,13 +30,20 @@ export default defineComponent({
     const timer = ref(null);
     const notificationRef = ref(null);
 
-    const close = (e?: MouseEvent) => {
+    const handleCloseBtnClick = (e?: MouseEvent) => {
       const dom = notificationRef.value as HTMLElement;
       fadeOut(dom, props.placement, () => {
         props.onCloseBtnClick?.({ e });
       });
     };
 
+    const close = () => {
+      const dom = notificationRef.value as HTMLElement;
+      fadeOut(dom, props.placement, () => {
+        props.onClose?.();
+      });
+    };
+
     const renderIcon = () => {
       let iconContent;
       if (props.icon === false) return null;
@@ -59,7 +66,7 @@ export default defineComponent({
     const renderClose = () => {
       const defaultClose = <CloseIcon />;
       return (
-        <span class={`${classPrefix.value}-message__close`} onClick={close}>
+        <span class={`${classPrefix.value}-message__close`} onClick={handleCloseBtnClick}>
           {renderTNode('closeBtn', defaultClose)}
         </span>
       );

packages/components/notification/props.ts

@@ -52,4 +52,6 @@ export default {
   onCloseBtnClick: Function as PropType<TdNotificationProps['onCloseBtnClick']>,
   /** 计时结束时触发 */
   onDurationEnd: Function as PropType<TdNotificationProps['onDurationEnd']>,
+  /** 调用 NotificationPlugin.close 时触发 */
+  onClose: Function as PropType<TdNotificationProps['onClose']>,
 };

packages/components/notification/type.ts

@@ -50,6 +50,10 @@ export interface TdNotificationProps {
    * 计时结束时触发
    */
   onDurationEnd?: () => void;
+  /**
+   * 调用 NotificationPlugin.close  时触发
+   */
+  onClose?: () => void;
 }
 
 export interface NotificationOptions extends TdNotificationProps {

packages/tdesign-vue-next/.changelog/pr-5958.md

@@ -0,0 +1,7 @@
+---
+pr_number: 5958
+contributor: baozjj
+---
+
+- feat(Notification): 新增 `onClose` 事件，用于处理调用 `NotifyPlugin.close()` 的相关回调场景 @baozjj ([#5958](https://github.com/Tencent/tdesign-vue-next/pull/5958))
+- fix(Notification): 修复调用 `NotifyPlugin.close()` 错误触发 `onCloseBtnClick` 回调的问题 @baozjj ([#5958](https://github.com/Tencent/tdesign-vue-next/pull/5958))