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 {