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

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>