Skip to content

Commit c0bc240

Browse files
chenjiahanchenjiahan
authored
docs(Toast): add loadingType demo (youzan#4783)
1 parent 878b330 commit c0bc240

4 files changed

Lines changed: 51 additions & 88 deletions

File tree

‎src/toast/README.md‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ Toast.loading({
2424
message: 'Loading...',
2525
forbidClick: true
2626
});
27+
28+
Toast.loading({
29+
message: 'Loading...',
30+
forbidClick: true,
31+
loadingType: 'spinner'
32+
});
2733
```
2834

2935
### Success/Fail
@@ -47,12 +53,12 @@ Toast({
4753
});
4854
```
4955

50-
### Advanced Usage
56+
### Update Message
5157

5258
```javascript
5359
const toast = Toast.loading({
54-
duration: 0, // continuous display toast
55-
forbidClick: true, // forbid click background
60+
duration: 0, // continuous display toast
61+
forbidClick: true,
5662
loadingType: 'spinner',
5763
message: '3 seconds'
5864
});

‎src/toast/README.zh-CN.md‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,20 @@ Toast('提示内容');
1919

2020
### 加载提示
2121

22+
使用`Toast.loading`方法展示加载提示，通过`forbidClick`属性可以禁用背景点击，通过`loadingType`属性可以自定义加载图标类型。
23+
2224
```js
2325
Toast.loading({
2426
message: '加载中...',
2527
forbidClick: true
2628
});
29+
30+
// 自定义加载图标
31+
Toast.loading({
32+
message: '加载中...',
33+
forbidClick: true,
34+
loadingType: 'spinner'
35+
});
2736
```
2837

2938
### 成功/失败提示
@@ -47,13 +56,12 @@ Toast({
4756
});
4857
```
4958

50-
### 高级用法
59+
### 动态更新提示
5160

5261
```js
5362
const toast = Toast.loading({
54-
duration: 0, // 持续展示 toast
55-
forbidClick: true, // 禁用背景点击
56-
loadingType: 'spinner',
63+
duration: 0, // 持续展示 toast
64+
forbidClick: true,
5765
message: '倒计时 3 秒'
5866
});
5967

@@ -64,6 +72,7 @@ const timer = setInterval(() => {
6472
toast.message = `倒计时 ${second} 秒`;
6573
} else {
6674
clearInterval(timer);
75+
// 手动清除 Toast
6776
Toast.clear();
6877
}
6978
}, 1000);

‎src/toast/demo/index.vue‎

Lines changed: 24 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,27 @@
11
<template>
22
<demo-section>
33
<demo-block :title="$t('title1')">
4-
<van-button
5-
type="primary"
6-
@click="$toast($t('text'))"
7-
>
8-
{{ $t('title1') }}
9-
</van-button>
10-
<van-button
11-
type="primary"
12-
@click="$toast($t('longText'))"
13-
>
14-
{{ $t('longTextButton') }}
15-
</van-button>
4+
<van-button type="primary" :text="$t('title1')" @click="$toast($t('text'))" />
5+
<van-button type="primary" :text="$t('longTextButton')" @click="$toast($t('longText'))" />
166
</demo-block>
177

188
<demo-block :title="$t('title2')">
19-
<van-button
20-
type="primary"
21-
@click="showLoadingToast"
22-
>
23-
{{ $t('title2') }}
24-
</van-button>
9+
<van-button type="primary" :text="$t('title2')" @click="showLoadingToast()" />
10+
<van-button type="primary" :text="$t('loadingType')" @click="showLoadingToast('spinner')" />
2511
</demo-block>
2612

2713
<demo-block :title="$t('title3')">
28-
<van-button
29-
type="info"
30-
@click="showSuccessToast"
31-
>
32-
{{ $t('success') }}
33-
</van-button>
34-
<van-button
35-
type="danger"
36-
@click="showFailToast"
37-
>
38-
{{ $t('fail') }}
39-
</van-button>
14+
<van-button type="info" :text="$t('success')" @click="showSuccessToast" />
15+
<van-button type="danger" :text="$t('fail')" @click="showFailToast" />
4016
</demo-block>
4117

42-
<demo-block
43-
v-if="!$attrs.weapp"
44-
:title="$t('customIcon')"
45-
>
46-
<van-button
47-
type="primary"
48-
@click="showIconToast"
49-
>
50-
{{ $t('customIcon') }}
51-
</van-button>
52-
53-
<van-button
54-
type="primary"
55-
@click="showImageToast"
56-
>
57-
{{ $t('customImage') }}
58-
</van-button>
18+
<demo-block v-if="!$attrs.weapp" :title="$t('customIcon')">
19+
<van-button type="primary" :text="$t('customIcon')" @click="showIconToast" />
20+
<van-button type="primary" :text="$t('customImage')" @click="showImageToast" />
5921
</demo-block>
6022

61-
<demo-block :title="$t('advancedUsage')">
62-
<van-button
63-
type="primary"
64-
@click="showCustomizedToast"
65-
>
66-
{{ $t('advancedUsage') }}
67-
</van-button>
23+
<demo-block :title="$t('updateMessage')">
24+
<van-button type="primary" :text="$t('updateMessage')" @click="showCustomizedToast" />
6825
</demo-block>
6926
</demo-section>
7027
</template>
@@ -85,7 +42,9 @@ export default {
8542
customIcon: '自定义图标',
8643
customImage: '展示图片',
8744
text4: second => `倒计时 ${second} 秒`,
88-
longTextButton: '长文字提示'
45+
longTextButton: '长文字提示',
46+
updateMessage: '动态更新提示',
47+
loadingType: '自定义加载图标'
8948
},
9049
'en-US': {
9150
title1: 'Text',
@@ -100,13 +59,19 @@ export default {
10059
customIcon: 'Custom Icon',
10160
customImage: 'Custom Image',
10261
text4: second => `${second} seconds`,
103-
longTextButton: 'Long Text'
62+
longTextButton: 'Long Text',
63+
updateMessage: 'Update Message',
64+
loadingType: 'Loading Type'
10465
}
10566
},
10667
10768
methods: {
108-
showLoadingToast() {
109-
this.$toast.loading({ forbidClick: true, message: this.$t('loading') });
69+
showLoadingToast(loadingType) {
70+
this.$toast.loading({
71+
forbidClick: true,
72+
message: this.$t('loading'),
73+
loadingType
74+
});
11075
},
11176
11277
showSuccessToast() {
@@ -135,7 +100,6 @@ export default {
135100
const toast = this.$toast.loading({
136101
duration: 0,
137102
forbidClick: true,
138-
loadingType: 'spinner',
139103
message: this.$t('text4', 3)
140104
});
141105
@@ -155,7 +119,7 @@ export default {
155119
</script>
156120

157121
<style lang="less">
158-
@import "../../style/var";
122+
@import '../../style/var';
159123
160124
.demo-toast {
161125
background-color: @white;

‎src/toast/test/__snapshots__/demo.spec.js.snap‎

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,10 @@
22

33
exports[`renders demo correctly 1`] = `
44
<div>
5-
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
6-
文字提示
7-
</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
8-
长文字提示
9-
</span></button></div>
10-
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
11-
加载提示
12-
</span></button></div>
13-
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
14-
成功提示
15-
</span></button> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">
16-
失败提示
17-
</span></button></div>
18-
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
19-
自定义图标
20-
</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
21-
展示图片
22-
</span></button></div>
23-
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
24-
高级用法
25-
</span></button></div>
5+
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">文字提示</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">长文字提示</span></button></div>
6+
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">加载提示</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义加载图标</span></button></div>
7+
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">成功提示</span></button> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">失败提示</span></button></div>
8+
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义图标</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">展示图片</span></button></div>
9+
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">动态更新提示</span></button></div>
2610
</div>
2711
`;

0 commit comments

Comments
 (0)