feat(Toast): add closeOnClick option (#4192)

src/toast/README.md

@@ -121,6 +121,7 @@ toast2.clear();
 | iconPrefix | Icon className prefix | `string` | `van-icon` |
 | mask | Whether to show mask | `boolean` | `false` |
 | forbidClick | Whether to forbid click background | `boolean` | `false` |
+| closeOnClick | Whether to close after clicked | `boolean` | `false` |
 | 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 | `any` | - |

src/toast/README.zh-CN.md

@@ -121,6 +121,7 @@ toast2.clear();
 | iconPrefix | 图标类名前缀 | `string` | `van-icon` | 2.0.9 |
 | mask | 是否显示背景遮罩层 | `boolean` | `false` | - |
 | forbidClick | 是否禁止背景点击 | `boolean` | `false` | - |
+| closeOnClick | 是否在点击后关闭 | `boolean` | `false` | 2.1.5 |
 | loadingType | 加载图标类型, 可选值为 `spinner` | `string` | `circular` | - |
 | duration | 展示时长(ms)，值为 0 时，toast 不会消失 | `number` | `3000` | - |
 | className | 自定义类名 | `any` | - | 1.6.0 |

src/toast/Toast.js

@@ -14,6 +14,7 @@ export default createComponent({
     iconPrefix: String,
     loadingType: String,
     forbidClick: Boolean,
+    closeOnClick: Boolean,
     message: [Number, String],
     type: {
       type: String,
@@ -49,8 +50,15 @@ export default createComponent({
   },
 
   methods: {
+    onClick() {
+      if (this.closeOnClick) {
+        this.close();
+      }
+    },
+
     toggleClickable() {
       const clickable = this.value && this.forbidClick;
+
       if (this.clickable !== clickable) {
         this.clickable = clickable;
         const action = clickable ? 'add' : 'remove';
@@ -111,6 +119,7 @@ export default createComponent({
             bem([this.position, { text: !hasIcon && type !== 'loading' }]),
             this.className
           ]}
+          onClick={this.onClick}
         >
           {ToastIcon()}
           {Message()}

src/toast/index.js

@@ -17,7 +17,8 @@ const defaultOptions = {
   forbidClick: false,
   loadingType: undefined,
   getContainer: 'body',
-  overlayStyle: null
+  overlayStyle: null,
+  closeOnClick: false
 };
 
 let queue = [];
@@ -44,6 +45,11 @@ function createInstance() {
     const toast = new (Vue.extend(VueToast))({
       el: document.createElement('div')
     });
+
+    toast.$on('input', value => {
+      toast.value = value;
+    });
+
     queue.push(toast);
   }
 

src/toast/test/index.spec.js

@@ -140,8 +140,23 @@ test('onClose callback', () => {
   });
 
   toast.clear();
-  Toast.allowMultiple(false);
   expect(onClose).toHaveBeenCalledTimes(1);
+  Toast.allowMultiple(false);
+});
+
+test('closeOnClick option', async () => {
+  Toast.allowMultiple();
+  const toast = Toast({
+    message: 'toast',
+    closeOnClick: true
+  });
+
+  await later();
+  toast.$el.click();
+
+  await later();
+  expect(toast.value).toBeFalsy();
+  Toast.allowMultiple(false);
 });
 
 test('register component', () => {

types/toast.d.ts

@@ -13,6 +13,7 @@ export type ToastOptions = {
   onClose?(): void;
   onOpened?(): void;
   forbidClick?: boolean;
+  closeOnClick?: boolean;
   loadingType?: string;
   message?: ToastMessage;
   getContainer?: string | (() => HTMLElement);