mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Toast): update demo (#6909)
This commit is contained in:
neverland
GitHub
parent
d4eb3632e1
commit
a8debb9266
@ -24,12 +24,6 @@ Toast.loading({
|
||||
message: 'Loading...',
|
||||
forbidClick: true,
|
||||
});
|
||||
|
||||
Toast.loading({
|
||||
message: 'Loading...',
|
||||
forbidClick: true,
|
||||
loadingType: 'spinner',
|
||||
});
|
||||
```
|
||||
|
||||
### Success/Fail
|
||||
@ -51,6 +45,12 @@ Toast({
|
||||
message: 'Custom Image',
|
||||
icon: 'https://img.yzcdn.cn/vant/logo.png',
|
||||
});
|
||||
|
||||
Toast.loading({
|
||||
message: 'Loading...',
|
||||
forbidClick: true,
|
||||
loadingType: 'spinner',
|
||||
});
|
||||
```
|
||||
|
||||
### Update Message
|
||||
|
||||
@ -23,20 +23,13 @@ Toast('提示内容');
|
||||
|
||||
### 加载提示
|
||||
|
||||
使用 `Toast.loading` 方法展示加载提示，通过 `forbidClick` 属性可以禁用背景点击，通过`loadingType` 属性可以自定义加载图标类型。
|
||||
使用 `Toast.loading` 方法展示加载提示，通过 `forbidClick` 属性可以禁用背景点击。
|
||||
|
||||
```js
|
||||
Toast.loading({
|
||||
message: '加载中...',
|
||||
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
|
||||
Toast({
|
||||
@ -59,9 +52,16 @@ Toast({
|
||||
});
|
||||
|
||||
Toast({
|
||||
message: '展示图片',
|
||||
message: '自定义图片',
|
||||
icon: 'https://img.yzcdn.cn/vant/logo.png',
|
||||
});
|
||||
|
||||
// 自定义加载图标
|
||||
Toast.loading({
|
||||
message: '加载中...',
|
||||
forbidClick: true,
|
||||
loadingType: 'spinner',
|
||||
});
|
||||
```
|
||||
|
||||
### 动态更新提示
|
||||
|
||||
@ -1,53 +1,26 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('title1')">
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="t('title1')"
|
||||
@click="$toast(t('text'))"
|
||||
/>
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="t('longTextButton')"
|
||||
@click="$toast(t('longText'))"
|
||||
/>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('title1')" @click="$toast(t('text'))" />
|
||||
<van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
|
||||
<van-cell is-link :title="t('success')" @click="showSuccessToast" />
|
||||
<van-cell is-link :title="t('fail')" @click="showFailToast" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title2')">
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="t('title2')"
|
||||
@click="showLoadingToast()"
|
||||
/>
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="t('loadingType')"
|
||||
<demo-block card v-if="!isWeapp" :title="t('customIcon')">
|
||||
<van-cell is-link :title="t('customIcon')" @click="showIconToast" />
|
||||
<van-cell is-link :title="t('customImage')" @click="showImageToast" />
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('loadingType')"
|
||||
@click="showLoadingToast('spinner')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title3')">
|
||||
<van-button type="info" :text="t('success')" @click="showSuccessToast" />
|
||||
<van-button type="danger" :text="t('fail')" @click="showFailToast" />
|
||||
</demo-block>
|
||||
|
||||
<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')"
|
||||
<demo-block card :title="t('updateMessage')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('updateMessage')"
|
||||
@click="showCustomizedToast"
|
||||
/>
|
||||
</demo-block>
|
||||
@ -64,13 +37,11 @@ export default {
|
||||
success: '成功提示',
|
||||
fail: '失败提示',
|
||||
text: '提示内容',
|
||||
longText: '这是一条长文字提示，超过一定字数就会换行',
|
||||
text2: '成功文案',
|
||||
text3: '失败文案',
|
||||
customIcon: '自定义图标',
|
||||
customImage: '展示图片',
|
||||
customImage: '自定义图片',
|
||||
text4: (second) => `倒计时 ${second} 秒`,
|
||||
longTextButton: '长文字提示',
|
||||
updateMessage: '动态更新提示',
|
||||
loadingType: '自定义加载图标',
|
||||
},
|
||||
@ -81,14 +52,11 @@ export default {
|
||||
success: 'Success',
|
||||
fail: 'Fail',
|
||||
text: 'Some messages',
|
||||
longText:
|
||||
'This is a long message, text will wrap when over a certain length',
|
||||
text2: 'Success',
|
||||
text3: 'Fail',
|
||||
customIcon: 'Custom Icon',
|
||||
customImage: 'Custom Image',
|
||||
text4: (second) => `${second} seconds`,
|
||||
longTextButton: 'Long Text',
|
||||
updateMessage: 'Update Message',
|
||||
loadingType: 'Loading Type',
|
||||
},
|
||||
@ -146,15 +114,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-toast {
|
||||
background-color: @white;
|
||||
|
||||
.van-button {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,28 +2,43 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">文字提示</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">长文字提示</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">加载提示</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">自定义加载图标</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--info van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">成功提示</span></div>
|
||||
</button> <button class="van-button van-button--danger van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">失败提示</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">自定义图标</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">展示图片</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">动态更新提示</span></div>
|
||||
</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 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 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>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user