From 257654ff03bb7e5f640011b4d8b998857ebf2553 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Thu, 9 Nov 2017 01:08:46 -0600
Subject: [PATCH] [new feature] toast add mask option (#296)

* [bugfix] CouponList always show empty info

* [bugfix] add click feedback of buttons in components

* [Doc] add custom theme document

* [new feature] Notice bar support more props

* [bugfix] PullRefresh test cases

* [bugfix] unused NoticeBar style

* [bugfix] Swipe width calc error

* [Doc] english document of all action components

* [Doc] change document site path to /zanui/vant

* [Doc] fix

* [bugfix] uploader style error

* [bugfix] tabs document demo

* [new feature] Cell support vue-router target route

* [bugfix] add cell test cases

* update yarn.lock

* [bugfix] Tabbar cann't display info when use icon slot

* [Doc] update document title

* [bugfix] Dialog should reset button text when showed

* [new feature] CouponList add showCloseButton prop

* [new feature] Swipe add 'initialSwipe' prop

* [bugfix] NoticeBar text disappeared when page back

* [new feature] ImagePreview support startPosition

* fix: improve imagePreview test cases

* [bugfix] Steps style error when has more than 4 items

* [new feature] normalize size of all icons

* [new feature] Stepper add plus & minus event

* fix: yarn.lock

* [bugfix] addressEdit icon render failed

* [new feature] toast add mask option
---
 docs/examples-docs/en-US/toast.md | 8 +++++---
 docs/examples-docs/zh-CN/toast.md | 7 ++++---
 packages/toast/index.js           | 1 +
 packages/toast/toast.vue          | 6 +++++-
 packages/vant-css/src/toast.css   | 6 +++++-
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/docs/examples-docs/en-US/toast.md b/docs/examples-docs/en-US/toast.md
index ee3c47aa6..5d36b3d45 100644
--- a/docs/examples-docs/en-US/toast.md
+++ b/docs/examples-docs/en-US/toast.md
@@ -7,7 +7,7 @@ export default {
       Toast('我是提示文案，建议不超过十五字~');
     },
     showLoadingToast() {
-      Toast.loading();
+      Toast.loading({ mask: true });
     },
     showSuccessToast() {
       Toast.success('成功文案');
@@ -76,7 +76,7 @@ export default {
 export default {
   methods: {
     showLoadingToast() {
-      Toast.loading();
+      Toast.loading({ mask: true });
     }
   }
 }
@@ -109,7 +109,7 @@ export default {
 
 :::demo Advanced Usage
 ```html
-<van-button @click="showCustomizedToast">#### Advanced Usage</van-button>
+<van-button @click="showCustomizedToast">Advanced Usage</van-button>
 ```
 
 ```javascript
@@ -154,5 +154,7 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` |
 | message | 内容 | `String` | `''` | - |
+| position | 位置 | `String` | `middle` | `top` `bottom` |
+| mask | 是否显示背景蒙层 | `Boolean` | `false` | - |
 | forbidClick | 禁止背景点击 | `Boolean` | `false` | - |
 | duration | 时长(ms) | `Number` | `3000` | 值为 0 时，toast 不会消失 |
diff --git a/docs/examples-docs/zh-CN/toast.md b/docs/examples-docs/zh-CN/toast.md
index 651cc5949..c25158576 100644
--- a/docs/examples-docs/zh-CN/toast.md
+++ b/docs/examples-docs/zh-CN/toast.md
@@ -15,7 +15,7 @@ export default {
       Toast('我是提示文案，建议不超过十五字~');
     },
     showLoadingToast() {
-      Toast.loading();
+      Toast.loading({ mask: true });
     },
     showSuccessToast() {
       Toast.success('成功文案');
@@ -25,7 +25,7 @@ export default {
     },
     showCustomizedToast(duration) {
       const toast = Toast.loading({
-        duration: 0,  
+        duration: 0,
         forbidClick: true,
         message: '倒计时 3 秒'
       });
@@ -84,7 +84,7 @@ export default {
 export default {
   methods: {
     showLoadingToast() {
-      Toast.loading();
+      Toast.loading({ mask: true });
     }
   }
 }
@@ -163,5 +163,6 @@ export default {
 | type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` |
 | message | 内容 | `String` | `''` | - |
 | position | 位置 | `String` | `middle` | `top` `bottom` |
+| mask | 是否显示背景蒙层 | `Boolean` | `false` | - |
 | forbidClick | 禁止背景点击 | `Boolean` | `false` | - |
 | duration | 时长(ms) | `Number` | `3000` | 值为 0 时，toast 不会消失 |
diff --git a/packages/toast/index.js b/packages/toast/index.js
index 265cf425e..8dff1d60b 100644
--- a/packages/toast/index.js
+++ b/packages/toast/index.js
@@ -8,6 +8,7 @@ const defaultOptions = {
   type: 'text',
   position: 'middle',
   duration: 3000,
+  mask: false,
   forbidClick: false,
   clear: () => {
     instance.visible = false;
diff --git a/packages/toast/toast.vue b/packages/toast/toast.vue
index 967e45804..6ba795c96 100644
--- a/packages/toast/toast.vue
+++ b/packages/toast/toast.vue
@@ -13,7 +13,7 @@
           <div v-if="message" class="van-toast__text">{{ message }}</div>
         </template>
       </div>
-      <div class="van-toast__overlay" v-if="forbidClick" />
+      <div :class="['van-toast__overlay', { 'van-toast__overlay--mask': mask }]" v-if="forbidClick || mask" />
     </div>
   </transition>
 </template>
@@ -50,6 +50,10 @@ export default {
     position: {
       type: String,
       default: 'middle'
+    },
+    mask: {
+      type: Boolean,
+      default: false
     }
   },
 
diff --git a/packages/vant-css/src/toast.css b/packages/vant-css/src/toast.css
index ac323dbb4..56e5fa785 100644
--- a/packages/vant-css/src/toast.css
+++ b/packages/vant-css/src/toast.css
@@ -28,7 +28,11 @@
     width: 100%;
     height: 100%;
     z-index: 3000;
-    background: transparent;
+    background-color: transparent;
+
+    &--mask {
+      background-color: rgba(0, 0, 0, .5);
+    }
   }
 
   &--text {