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', });