diff --git a/example/pages/toast/index.js b/example/pages/toast/index.js
index e544b94a..7b30a623 100644
--- a/example/pages/toast/index.js
+++ b/example/pages/toast/index.js
@@ -11,7 +11,15 @@ Page({
},
showLoadingToast() {
- Toast.loading({ mask: true, message: '加载中...' });
+ Toast.loading({ message: '加载中...', forbidClick: true });
+ },
+
+ showCustomLoadingToast() {
+ Toast.loading({
+ message: '加载中...',
+ forbidClick: true,
+ loadingType: 'spinner',
+ });
},
showSuccessToast() {
@@ -22,13 +30,12 @@ Page({
Toast.fail('失败提示');
},
- showCustomizedToast(duration) {
- const text = second => `倒计时 ${second} 秒`;
+ showCustomizedToast() {
+ const text = (second) => `倒计时 ${second} 秒`;
const toast = Toast.loading({
duration: 0,
forbidClick: true,
- loadingType: 'spinner',
- message: text(3)
+ message: text(3),
});
let second = 3;
@@ -41,5 +48,5 @@ Page({
Toast.clear();
}
}, 1000);
- }
+ },
});
diff --git a/example/pages/toast/index.wxml b/example/pages/toast/index.wxml
index addf6796..67b83ce0 100644
--- a/example/pages/toast/index.wxml
+++ b/example/pages/toast/index.wxml
@@ -1,19 +1,20 @@
- 文字提示
- 长文字提示
+ 文字提示
+ 长文字提示
- 加载提示
+ 加载提示
+ 自定义加载图标
- 成功提示
- 失败提示
+ 成功提示
+ 失败提示
-
- 高级用法
+
+ 动态更新提示
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 71ee8619..cd5f0b74 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -522,13 +522,13 @@
@toast-text-color: @white;
@toast-line-height: 20px;
@toast-border-radius: @border-radius-lg;
-@toast-background-color: rgba(@text-color, 0.88);
-@toast-icon-size: 48px;
+@toast-background-color: fade(@black, 70%);
+@toast-icon-size: 36px;
@toast-text-min-width: 96px;
@toast-text-padding: @padding-xs @padding-sm;
@toast-default-padding: @padding-md;
-@toast-default-width: 90px;
-@toast-default-min-height: 90px;
+@toast-default-width: 88px;
+@toast-default-min-height: 88px;
// GridItem
@grid-item-content-padding: @padding-md @padding-xs;
diff --git a/packages/toast/README.md b/packages/toast/README.md
index e320cd03..a26baa82 100644
--- a/packages/toast/README.md
+++ b/packages/toast/README.md
@@ -26,10 +26,19 @@ Toast('我是提示文案,建议不超过十五字~');
### 加载提示
+使用 `Toast.loading` 方法展示加载提示,通过 `forbidClick` 属性可以禁用背景点击,通过 `loadingType` 属性可以自定义加载图标类型。
+
```javascript
Toast.loading({
- mask: true,
message: '加载中...',
+ forbidClick: true,
+});
+
+// 自定义加载图标
+Toast.loading({
+ message: '加载中...',
+ forbidClick: true,
+ loadingType: 'spinner',
});
```
@@ -40,14 +49,13 @@ Toast.success('成功文案');
Toast.fail('失败文案');
```
-### 高级用法
+### 动态更新提示
```javascript
const toast = Toast.loading({
duration: 0, // 持续展示 toast
- forbidClick: true, // 禁用背景点击
+ forbidClick: true,
message: '倒计时 3 秒',
- loadingType: 'spinner',
selector: '#custom-selector',
});