fix(Toast): closeOnClickOverlay not work (#8044)

* fix(Toast): closeOnClickOverlay not work

* fix: demo

src/toast/Toast.js

@@ -25,6 +25,7 @@ export default createComponent({
     overlayClass: null,
     overlayStyle: Object,
     closeOnClick: Boolean,
+    closeOnClickOverlay: Boolean,
     type: {
       type: String,
       default: 'text',
@@ -63,6 +64,10 @@ export default createComponent({
       clearTimeout(timer);
     };
 
+    const toggle = (show) => {
+      emit('update:show', show);
+    };
+
     const renderIcon = () => {
       const { icon, type, iconPrefix, loadingType } = props;
       const hasIcon = icon || type === 'success' || type === 'fail';
@@ -119,8 +124,10 @@ export default createComponent({
         transition={props.transition}
         overlayClass={props.overlayClass}
         overlayStyle={props.overlayStyle}
+        closeOnClickOverlay={props.closeOnClickOverlay}
         onClick={onClick}
         onClosed={clearTimer}
+        {...{ 'onUpdate:show': toggle }}
       >
         {renderIcon()}
         {renderMessage()}

src/toast/test/index.legacy.js

@@ -166,23 +166,6 @@ test('should trigger onClose callback after closed', () => {
   Toast.allowMultiple(false);
 });
 
-test('closeOnClick option', async () => {
-  Toast.allowMultiple();
-  const toast = Toast({
-    message: 'toast',
-  });
-
-  await later();
-  toast.$el.click();
-  expect(toast.value).toBeTruthy();
-
-  toast.closeOnClick = true;
-  toast.$el.click();
-  expect(toast.value).toBeFalsy();
-
-  Toast.allowMultiple(false);
-});
-
 test('register component', () => {
   Vue.use(Toast);
   expect(Vue.component(ToastVue.name)).toBeTruthy();

src/toast/test/index.spec.js

@@ -15,3 +15,27 @@ test('should change overlay style after using overlay-style prop', async () => {
   await later();
   expect(wrapper.find('.van-overlay').element.style.background).toEqual('red');
 });
+
+test('should close Toast when using closeOnClick prop and clicked', () => {
+  const wrapper = mount(Toast, {
+    props: {
+      show: true,
+      closeOnClick: true,
+    },
+  });
+
+  wrapper.find('.van-toast').trigger('click');
+  expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
+});
+
+test('should close Toast when using closeOnClickOverlay prop and overlay is clicked', () => {
+  const wrapper = mount(Toast, {
+    props: {
+      show: true,
+      closeOnClickOverlay: true,
+    },
+  });
+
+  wrapper.find('.van-overlay').trigger('click');
+  expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
+});