[bugfix] Toast: mask render uncorrectly when forbidClick (#1154)

packages/toast/index.js

@@ -33,10 +33,6 @@ function createInstance() {
 // transform toast options to popup props
 function transformer(options) {
   options.overlay = options.mask;
-  if (options.forbidClick && !options.overlay) {
-    options.overlay = true;
-    options.overlayStyle = { background: 'transparent' };
-  }
   return options;
 }
 

packages/toast/test/index.spec.js

@@ -4,12 +4,20 @@ import { TransitionStub } from '@vue/test-utils';
 
 Vue.component('transition', TransitionStub);
 
-test('create a forbidClick toast', () => {
+test('create a forbidClick toast', done => {
   const toast = Toast({
     forbidClick: true
   });
 
   expect(toast.$el.outerHTML).toMatchSnapshot();
+  setTimeout(() => {
+    expect(document.body.classList.contains('van-toast--unclickable')).toBeTruthy();
+    toast.forbidClick = false;
+    setTimeout(() => {
+      expect(document.body.classList.contains('van-toast--unclickable')).toBeFalsy();
+      done();
+    });
+  });
 });
 
 it('toast disappeared after duration', (done) => {
@@ -20,7 +28,7 @@ it('toast disappeared after duration', (done) => {
   setTimeout(() => {
     expect(toast.$el.style.display).toEqual('none');
     done();
-  }, 500);
+  }, 50);
 });
 
 test('clear toast', () => {

packages/toast/toast.vue

@@ -1,12 +1,12 @@
 <template>
   <transition name="van-fade">
-    <div v-show="value" :class="b([displayStyle, position])">
+    <div v-show="value" :class="b([style, position])">
       <!-- text only -->
-      <div v-if="displayStyle === 'text'">{{ message }}</div>
-      <div v-if="displayStyle === 'html'" v-html="message" />
+      <div v-if="style === 'text'">{{ message }}</div>
+      <div v-if="style === 'html'" v-html="message" />
 
       <!-- with icon -->
-      <template v-if="displayStyle === 'default'">
+      <template v-if="style === 'default'">
         <loading v-if="type === 'loading'" color="white" :type="loadingType" />
         <icon v-else :class="b('icon')" :name="type" />
         <div v-if="isDef(message)" :class="b('text')">{{ message }}</div>
@@ -27,6 +27,7 @@ export default create({
   mixins: [Popup],
 
   props: {
+    forbidClick: Boolean,
     message: [String, Number],
     type: {
       type: String,
@@ -46,10 +47,41 @@ export default create({
     }
   },
 
+  data() {
+    return {
+      clickable: false
+    };
+  },
+
   computed: {
-    displayStyle() {
+    style() {
       return STYLE_LIST.indexOf(this.type) !== -1 ? 'default' : this.type;
     }
+  },
+
+  mounted() {
+    this.toggleClickale();
+  },
+
+  watch: {
+    value() {
+      this.toggleClickale();
+    },
+
+    forbidClick() {
+      this.toggleClickale();
+    }
+  },
+
+  methods: {
+    toggleClickale() {
+      const clickable = this.value && this.forbidClick;
+      if (this.clickable !== clickable) {
+        this.clickable = clickable;
+        const action = clickable ? 'add' : 'remove';
+        document.body.classList[action]('van-toast--unclickable');
+      }
+    }
   }
 });
 </script>

packages/vant-css/src/toast.css

@@ -17,6 +17,10 @@
   transform: translate3d(-50%, -50%, 0);
   background-color: rgba(0, 0, 0, .7);
 
+  &--unclickable {
+    pointer-events: none;
+  }
+
   &--text {
     padding: 12px;
     min-width: 220px;