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
-#### Advanced Usage
+Advanced Usage
```
```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 @@
{{ message }}
-
+
@@ -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 {