diff --git a/src/toast/README.md b/src/toast/README.md
index 8c0f9ddc1..ac1b482a9 100644
--- a/src/toast/README.md
+++ b/src/toast/README.md
@@ -24,6 +24,12 @@ Toast.loading({
message: 'Loading...',
forbidClick: true
});
+
+Toast.loading({
+ message: 'Loading...',
+ forbidClick: true,
+ loadingType: 'spinner'
+});
```
### Success/Fail
@@ -47,12 +53,12 @@ Toast({
});
```
-### Advanced Usage
+### Update Message
```javascript
const toast = Toast.loading({
- duration: 0, // continuous display toast
- forbidClick: true, // forbid click background
+ duration: 0, // continuous display toast
+ forbidClick: true,
loadingType: 'spinner',
message: '3 seconds'
});
diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md
index 5047dfa26..0ef0d1ead 100644
--- a/src/toast/README.zh-CN.md
+++ b/src/toast/README.zh-CN.md
@@ -19,11 +19,20 @@ Toast('提示内容');
### 加载提示
+使用`Toast.loading`方法展示加载提示,通过`forbidClick`属性可以禁用背景点击,通过`loadingType`属性可以自定义加载图标类型。
+
```js
Toast.loading({
message: '加载中...',
forbidClick: true
});
+
+// 自定义加载图标
+Toast.loading({
+ message: '加载中...',
+ forbidClick: true,
+ loadingType: 'spinner'
+});
```
### 成功/失败提示
@@ -47,13 +56,12 @@ Toast({
});
```
-### 高级用法
+### 动态更新提示
```js
const toast = Toast.loading({
- duration: 0, // 持续展示 toast
- forbidClick: true, // 禁用背景点击
- loadingType: 'spinner',
+ duration: 0, // 持续展示 toast
+ forbidClick: true,
message: '倒计时 3 秒'
});
@@ -64,6 +72,7 @@ const timer = setInterval(() => {
toast.message = `倒计时 ${second} 秒`;
} else {
clearInterval(timer);
+ // 手动清除 Toast
Toast.clear();
}
}, 1000);
diff --git a/src/toast/demo/index.vue b/src/toast/demo/index.vue
index d302b75a4..be56e15a0 100644
--- a/src/toast/demo/index.vue
+++ b/src/toast/demo/index.vue
@@ -1,70 +1,27 @@
-
- {{ $t('title1') }}
-
-
- {{ $t('longTextButton') }}
-
+
+
-
- {{ $t('title2') }}
-
+
+
-
- {{ $t('success') }}
-
-
- {{ $t('fail') }}
-
+
+
-
-
- {{ $t('customIcon') }}
-
-
-
- {{ $t('customImage') }}
-
+
+
+
-
-
- {{ $t('advancedUsage') }}
-
+
+
@@ -85,7 +42,9 @@ export default {
customIcon: '自定义图标',
customImage: '展示图片',
text4: second => `倒计时 ${second} 秒`,
- longTextButton: '长文字提示'
+ longTextButton: '长文字提示',
+ updateMessage: '动态更新提示',
+ loadingType: '自定义加载图标'
},
'en-US': {
title1: 'Text',
@@ -100,13 +59,19 @@ export default {
customIcon: 'Custom Icon',
customImage: 'Custom Image',
text4: second => `${second} seconds`,
- longTextButton: 'Long Text'
+ longTextButton: 'Long Text',
+ updateMessage: 'Update Message',
+ loadingType: 'Loading Type'
}
},
methods: {
- showLoadingToast() {
- this.$toast.loading({ forbidClick: true, message: this.$t('loading') });
+ showLoadingToast(loadingType) {
+ this.$toast.loading({
+ forbidClick: true,
+ message: this.$t('loading'),
+ loadingType
+ });
},
showSuccessToast() {
@@ -135,7 +100,6 @@ export default {
const toast = this.$toast.loading({
duration: 0,
forbidClick: true,
- loadingType: 'spinner',
message: this.$t('text4', 3)
});
@@ -155,7 +119,7 @@ export default {