blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Toast): update demo (#6909)

Browse Source
This commit is contained in:
neverland 2020-07-30 21:38:54 +08:00 committed by GitHub
parent d4eb3632e1
commit a8debb9266
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 70 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/toast/README.md
View File

@ -24,12 +24,6 @@ Toast.loading({
message: 'Loading...', message: 'Loading...',
forbidClick: true, forbidClick: true,
}); });
Toast.loading({
message: 'Loading...',
forbidClick: true,
loadingType: 'spinner',
});
``` ```
### Success/Fail ### Success/Fail
@ -51,6 +45,12 @@ Toast({
message: 'Custom Image', message: 'Custom Image',
icon: 'https://img.yzcdn.cn/vant/logo.png', icon: 'https://img.yzcdn.cn/vant/logo.png',
}); });
Toast.loading({
message: 'Loading...',
forbidClick: true,
loadingType: 'spinner',
});
``` ```
### Update Message ### Update Message

20
src/toast/README.zh-CN.md
View File

@ -23,20 +23,13 @@ Toast('提示内容');
### 加载提示 ### 加载提示
使用 `Toast.loading` 方法展示加载提示，通过 `forbidClick` 属性可以禁用背景点击，通过`loadingType` 属性可以自定义加载图标类型。 使用 `Toast.loading` 方法展示加载提示，通过 `forbidClick` 属性可以禁用背景点击。
```js ```js
Toast.loading({ Toast.loading({
message: '加载中...', message: '加载中...',
forbidClick: true, forbidClick: true,
}); });
// 自定义加载图标
Toast.loading({
message: '加载中...',
forbidClick: true,
loadingType: 'spinner',
});
``` ```
### 成功/失败提示 ### 成功/失败提示
@ -50,7 +43,7 @@ Toast.fail('失败文案');
### 自定义图标 ### 自定义图标
通过 `icon` 选项可以自定义图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。 通过 `icon` 选项可以自定义图标，支持传入[图标名称](#/zh-CN/icon)或图片链接，通过`loadingType` 属性可以自定义加载图标类型。
```js ```js
Toast({ Toast({
@ -59,9 +52,16 @@ Toast({
}); });
Toast({ Toast({
message: '展示图片', message: '自定义图片',
icon: 'https://img.yzcdn.cn/vant/logo.png', icon: 'https://img.yzcdn.cn/vant/logo.png',
}); });
// 自定义加载图标
Toast.loading({
message: '加载中...',
forbidClick: true,
loadingType: 'spinner',
});
``` ```
### 动态更新提示 ### 动态更新提示

76
src/toast/demo/index.vue
View File

@ -1,53 +1,26 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('title1')"> <demo-block card :title="t('basicUsage')">
<van-button <van-cell is-link :title="t('title1')" @click="$toast(t('text'))" />
type="primary" <van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
:text="t('title1')" <van-cell is-link :title="t('success')" @click="showSuccessToast" />
@click="$toast(t('text'))" <van-cell is-link :title="t('fail')" @click="showFailToast" />
/>
<van-button
type="primary"
:text="t('longTextButton')"
@click="$toast(t('longText'))"
/>
</demo-block> </demo-block>
<demo-block :title="t('title2')"> <demo-block card v-if="!isWeapp" :title="t('customIcon')">
<van-button <van-cell is-link :title="t('customIcon')" @click="showIconToast" />
type="primary" <van-cell is-link :title="t('customImage')" @click="showImageToast" />
:text="t('title2')" <van-cell
@click="showLoadingToast()" is-link
/> :title="t('loadingType')"
<van-button
type="primary"
:text="t('loadingType')"
@click="showLoadingToast('spinner')" @click="showLoadingToast('spinner')"
/> />
</demo-block> </demo-block>
<demo-block :title="t('title3')"> <demo-block card :title="t('updateMessage')">
<van-button type="info" :text="t('success')" @click="showSuccessToast" /> <van-cell
<van-button type="danger" :text="t('fail')" @click="showFailToast" /> is-link
</demo-block> :title="t('updateMessage')"
<demo-block v-if="!isWeapp" :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('updateMessage')">
<van-button
type="primary"
:text="t('updateMessage')"
@click="showCustomizedToast" @click="showCustomizedToast"
/> />
</demo-block> </demo-block>
@ -64,13 +37,11 @@ export default {
success: '成功提示', success: '成功提示',
fail: '失败提示', fail: '失败提示',
text: '提示内容', text: '提示内容',
longText: '这是一条长文字提示，超过一定字数就会换行',
text2: '成功文案', text2: '成功文案',
text3: '失败文案', text3: '失败文案',
customIcon: '自定义图标', customIcon: '自定义图标',
customImage: '展示图片', customImage: '自定义图片',
text4: (second) => `倒计时 ${second} 秒`, text4: (second) => `倒计时 ${second} 秒`,
longTextButton: '长文字提示',
updateMessage: '动态更新提示', updateMessage: '动态更新提示',
loadingType: '自定义加载图标', loadingType: '自定义加载图标',
}, },
@ -81,14 +52,11 @@ export default {
success: 'Success', success: 'Success',
fail: 'Fail', fail: 'Fail',
text: 'Some messages', text: 'Some messages',
longText:
'This is a long message, text will wrap when over a certain length',
text2: 'Success', text2: 'Success',
text3: 'Fail', text3: 'Fail',
customIcon: 'Custom Icon', customIcon: 'Custom Icon',
customImage: 'Custom Image', customImage: 'Custom Image',
text4: (second) => `${second} seconds`, text4: (second) => `${second} seconds`,
longTextButton: 'Long Text',
updateMessage: 'Update Message', updateMessage: 'Update Message',
loadingType: 'Loading Type', loadingType: 'Loading Type',
}, },
@ -146,15 +114,3 @@ export default {
}, },
}; };
</script> </script>
<style lang="less">
@import '../../style/var';
.demo-toast {
background-color: @white;
.van-button {
margin-left: @padding-md;
}
}
</style>

61
src/toast/test/__snapshots__/demo.spec.js.snap
View File

@ -2,28 +2,43 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div><button class="van-button van-button--primary van-button--normal"> <div>
<div class="van-button__content"><span class="van-button__text">文字提示</span></div> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
</button> <button class="van-button van-button--primary van-button--normal"> <div class="van-cell__title"><span>文字提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<div class="van-button__content"><span class="van-button__text">长文字提示</span></div> <!----></i>
</button></div> </div>
<div><button class="van-button van-button--primary van-button--normal"> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-button__content"><span class="van-button__text">加载提示</span></div> <div class="van-cell__title"><span>加载提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
</button> <button class="van-button van-button--primary van-button--normal"> <!----></i>
<div class="van-button__content"><span class="van-button__text">自定义加载图标</span></div> </div>
</button></div> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div><button class="van-button van-button--info van-button--normal"> <div class="van-cell__title"><span>成功提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<div class="van-button__content"><span class="van-button__text">成功提示</span></div> <!----></i>
</button> <button class="van-button van-button--danger van-button--normal"> </div>
<div class="van-button__content"><span class="van-button__text">失败提示</span></div> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
</button></div> <div class="van-cell__title"><span>失败提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<div><button class="van-button van-button--primary van-button--normal"> <!----></i>
<div class="van-button__content"><span class="van-button__text">自定义图标</span></div> </div>
</button> <button class="van-button van-button--primary van-button--normal"> </div>
<div class="van-button__content"><span class="van-button__text">展示图片</span></div> <div>
</button></div> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div><button class="van-button van-button--primary van-button--normal"> <div class="van-cell__title"><span>自定义图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<div class="van-button__content"><span class="van-button__text">动态更新提示</span></div> <!----></i>
</button></div> </div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>自定义图片</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>自定义加载图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
</div>
<div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>动态更新提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
</div>
</div> </div>
`; `;