From cf43e6ee752a1ce21661335cade0678faf8c5b45 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 27 Dec 2019 10:57:47 +0800
Subject: [PATCH] fix(Toast): may lose forbid click when has multiple toasts
 (#5398)

---
 src/toast/Toast.js           |  4 ++--
 src/toast/lock-click.ts      | 17 +++++++++++++++++
 src/toast/test/index.spec.js | 32 +++++++++++++++++++++++++++-----
 3 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 src/toast/lock-click.ts

diff --git a/src/toast/Toast.js b/src/toast/Toast.js
index e26e7ed59..f9afcf8de 100644
--- a/src/toast/Toast.js
+++ b/src/toast/Toast.js
@@ -1,5 +1,6 @@
 import { createNamespace, isDef } from '../utils';
 import { PopupMixin } from '../mixins/popup';
+import { lockClick } from './lock-click';
 import Icon from '../icon';
 import Loading from '../loading';
 
@@ -65,8 +66,7 @@ export default createComponent({
 
       if (this.clickable !== clickable) {
         this.clickable = clickable;
-        const action = clickable ? 'add' : 'remove';
-        document.body.classList[action]('van-toast--unclickable');
+        lockClick(clickable);
       }
     },
 
diff --git a/src/toast/lock-click.ts b/src/toast/lock-click.ts
new file mode 100644
index 000000000..7562b78e9
--- /dev/null
+++ b/src/toast/lock-click.ts
@@ -0,0 +1,17 @@
+let lockCount = 0;
+
+export function lockClick(lock: boolean) {
+  if (lock) {
+    if (!lockCount) {
+      document.body.classList.add('van-toast--unclickable');
+    }
+
+    lockCount++;
+  } else {
+    lockCount--;
+
+    if (!lockCount) {
+      document.body.classList.remove('van-toast--unclickable');
+    }
+  }
+}
diff --git a/src/toast/test/index.spec.js b/src/toast/test/index.spec.js
index ae05aa072..eb0d35eb5 100644
--- a/src/toast/test/index.spec.js
+++ b/src/toast/test/index.spec.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Toast from '..';
 import ToastVue from '../Toast';
 import { later } from '../../../test';
+import { lockClick } from '../lock-click';
 
 test('create a forbidClick toast', async () => {
   const toast = Toast({
@@ -13,11 +14,15 @@ test('create a forbidClick toast', async () => {
   expect(toast.$el.outerHTML).toMatchSnapshot();
 
   await later();
-  expect(document.body.classList.contains('van-toast--unclickable')).toBeTruthy();
+  expect(
+    document.body.classList.contains('van-toast--unclickable')
+  ).toBeTruthy();
   toast.forbidClick = false;
 
   await later();
-  expect(document.body.classList.contains('van-toast--unclickable')).toBeFalsy();
+  expect(
+    document.body.classList.contains('van-toast--unclickable')
+  ).toBeFalsy();
 });
 
 it('toast disappeared after duration', async () => {
@@ -156,15 +161,17 @@ test('onClose callback', () => {
 test('closeOnClick option', async () => {
   Toast.allowMultiple();
   const toast = Toast({
-    message: 'toast',
-    closeOnClick: true
+    message: 'toast'
   });
 
   await later();
   toast.$el.click();
+  expect(toast.value).toBeTruthy();
 
-  await later();
+  toast.closeOnClick = true;
+  toast.$el.click();
   expect(toast.value).toBeFalsy();
+
   Toast.allowMultiple(false);
 });
 
@@ -172,3 +179,18 @@ test('register component', () => {
   Vue.use(Toast);
   expect(Vue.component(ToastVue.name)).toBeTruthy();
 });
+
+test('lockClick function', () => {
+  const CLASSNAME = 'van-toast--unclickable';
+  expect(document.body.classList.contains(CLASSNAME)).toBeFalsy();
+
+  lockClick(true);
+  expect(document.body.classList.contains(CLASSNAME)).toBeTruthy();
+
+  lockClick(true);
+  lockClick(false);
+  expect(document.body.classList.contains(CLASSNAME)).toBeTruthy();
+
+  lockClick(false);
+  expect(document.body.classList.contains(CLASSNAME)).toBeFalsy();
+});