fix(Toast): may lose forbid click when has multiple toasts (#5398)

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);
       }
     },
 

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');
+    }
+  }
+}

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();
+});