mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Toast): add loadingType demo (#4783)
This commit is contained in:
neverland
GitHub
parent
878b330431
commit
c0bc240bc8
@ -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'
|
||||
});
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -1,70 +1,27 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="$toast($t('text'))"
|
||||
>
|
||||
{{ $t('title1') }}
|
||||
</van-button>
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="$toast($t('longText'))"
|
||||
>
|
||||
{{ $t('longTextButton') }}
|
||||
</van-button>
|
||||
<van-button type="primary" :text="$t('title1')" @click="$toast($t('text'))" />
|
||||
<van-button type="primary" :text="$t('longTextButton')" @click="$toast($t('longText'))" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="showLoadingToast"
|
||||
>
|
||||
{{ $t('title2') }}
|
||||
</van-button>
|
||||
<van-button type="primary" :text="$t('title2')" @click="showLoadingToast()" />
|
||||
<van-button type="primary" :text="$t('loadingType')" @click="showLoadingToast('spinner')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-button
|
||||
type="info"
|
||||
@click="showSuccessToast"
|
||||
>
|
||||
{{ $t('success') }}
|
||||
</van-button>
|
||||
<van-button
|
||||
type="danger"
|
||||
@click="showFailToast"
|
||||
>
|
||||
{{ $t('fail') }}
|
||||
</van-button>
|
||||
<van-button type="info" :text="$t('success')" @click="showSuccessToast" />
|
||||
<van-button type="danger" :text="$t('fail')" @click="showFailToast" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block
|
||||
v-if="!$attrs.weapp"
|
||||
:title="$t('customIcon')"
|
||||
>
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="showIconToast"
|
||||
>
|
||||
{{ $t('customIcon') }}
|
||||
</van-button>
|
||||
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="showImageToast"
|
||||
>
|
||||
{{ $t('customImage') }}
|
||||
</van-button>
|
||||
<demo-block v-if="!$attrs.weapp" :title="$t('customIcon')">
|
||||
<van-button type="primary" :text="$t('customIcon')" @click="showIconToast" />
|
||||
<van-button type="primary" :text="$t('customImage')" @click="showImageToast" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="showCustomizedToast"
|
||||
>
|
||||
{{ $t('advancedUsage') }}
|
||||
</van-button>
|
||||
<demo-block :title="$t('updateMessage')">
|
||||
<van-button type="primary" :text="$t('updateMessage')" @click="showCustomizedToast" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -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 {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-toast {
|
||||
background-color: @white;
|
||||
|
||||
@ -2,26 +2,10 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<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>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
加载提示
|
||||
</span></button></div>
|
||||
<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>
|
||||
<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>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
高级用法
|
||||
</span></button></div>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">动态更新提示</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user