[new feature] Toast: add onClose prop (#2964)

packages/toast/en-US.md

@@ -106,4 +106,5 @@ toast2.clear();
 | loadingType | Loading icon type, can be set to `spinner` | `String` | `circular` |
 | duration | Toast duration(ms), won't disappear if value is 0 | `Number` | `3000` |
 | className | Custom className | `String | Array | Object` | - |
-| get-container | Return the mount node for Toast | `String | () => HTMLElement` | `body` |
+| onClose | onClose callback function | `Function` | - |
+| getContainer | Return the mount node for Toast | `String | () => HTMLElement` | `body` |

packages/toast/index.js

@@ -8,6 +8,7 @@ const defaultOptions = {
   value: true,
   message: '',
   className: '',
+  onClose: null,
   duration: 3000,
   position: 'middle',
   forbidClick: false,
@@ -52,6 +53,10 @@ function Toast(options = {}) {
     clear() {
       toast.value = false;
 
+      if (options.onClose) {
+        options.onClose();
+      }
+
       if (!singleton && !isServer) {
         clearTimeout(toast.timer);
         queue = queue.filter(item => item !== toast);

packages/toast/test/index.spec.js

@@ -73,3 +73,16 @@ test('toast duration 0', () => {
   expect(toast.timer).toBeFalsy();
   Toast.allowMultiple(false);
 });
+
+test('onClose callback', () => {
+  Toast.allowMultiple();
+  const onClose = jest.fn();
+  const toast = Toast({
+    message: 'toast',
+    onClose
+  });
+
+  toast.clear();
+  Toast.allowMultiple(false);
+  expect(onClose.mock.calls.length).toEqual(1);
+});

packages/toast/zh-CN.md

@@ -96,11 +96,12 @@ toast2.clear();
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | type | 提示类型，可选值为 `loading` `success`<br>`fail` `html` | `String` | `text` | - |
-| position | 位置，可选值为 `top` `middle` `bottom` | `String` | `middle` | - |
+| position | 位置，可选值为 `top` `bottom` | `String` | `middle` | - |
 | message | 内容 | `String` | `''` | - | - |
 | mask | 是否显示背景蒙层 | `Boolean` | `false` | - |
 | forbidClick | 是否禁止背景点击 | `Boolean` | `false` | - |
 | loadingType | 加载图标类型, 可选值为 `spinner` | `String` | `circular` | 1.1.3 |
 | duration | 展示时长(ms)，值为 0 时，toast 不会消失 | `Number` | `3000` | - |
 | className | 自定义类名 | `String | Array | Object` | - | 1.6.0 |
+| onClose | 关闭时的回调函数 | `Function` | - | 1.6.10 |
 | getContainer | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | `body` | 1.6.3 |

types/toast.d.ts

@@ -9,6 +9,7 @@ export type ToastOptions = {
   position?: string;
   duration?: number;
   className?: any;
+  onClose?(): void;
   forbidClick?: boolean;
   loadingType?: string;
   message?: ToastMessage;
@@ -23,7 +24,7 @@ export interface VanToast extends Vue, VanPopupMixin {
   clear(): void;
 }
 
-export interface Toast {
+export interface IToast {
   (message: ToastOptions | ToastMessage, options?: ToastOptions): VanToast;
   loading(options?: ToastOptions | ToastMessage): VanToast;
   success(options?: ToastOptions | ToastMessage): VanToast;
@@ -37,8 +38,8 @@ export interface Toast {
 
 declare module 'vue/types/vue' {
   interface Vue {
-    $toast: Toast
+    $toast: IToast
   }
 }
 
-export const Toast: Toast;
+export const Toast: IToast;