blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 19:41:45 +08:00
Code Issues Projects Releases Wiki Activity

feat(Toast): update style (#3451)

Browse Source
This commit is contained in:
neverland 2020-07-29 18:14:40 +08:00 committed by GitHub
parent f56f02e9c7
commit deb670e285
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
example/pages/toast/index.js
View File

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

15
example/pages/toast/index.wxml
View File

@ -1,19 +1,20 @@
<demo-block title="文字提示" padding>
<van-button bind:tap="showToast" class="demo-margin-right">文字提示</van-button>
<van-button bind:tap="showLongToast">长文字提示</van-button>
<van-button type="primary" bind:tap="showToast" class="demo-margin-right">文字提示</van-button>
<van-button type="primary" bind:tap="showLongToast">长文字提示</van-button>
</demo-block>
<demo-block title="加载提示" padding>
<van-button bind:tap="showLoadingToast">加载提示</van-button>
<van-button type="primary" bind:tap="showLoadingToast" class="demo-margin-right">加载提示</van-button>
<van-button type="primary" bind:tap="showCustomLoadingToast">自定义加载图标</van-button>
</demo-block>
<demo-block title="成功/失败提示" padding>
<van-button bind:tap="showSuccessToast" class="demo-margin-right">成功提示</van-button>
<van-button bind:tap="showFailToast">失败提示</van-button>
<van-button type="info" bind:tap="showSuccessToast" class="demo-margin-right">成功提示</van-button>
<van-button type="danger" bind:tap="showFailToast">失败提示</van-button>
</demo-block>
<demo-block title="高级用法" padding>
<van-button bind:tap="showCustomizedToast">高级用法</van-button>
<demo-block title="动态更新提示" padding>
<van-button type="primary" bind:tap="showCustomizedToast">动态更新提示</van-button>
</demo-block>
<van-toast id="van-toast" />

8
packages/common/style/var.less
View File

@ -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;

16
packages/toast/README.md
View File

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