mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
140 lines
3.5 KiB
Vue
140 lines
3.5 KiB
Vue
<template>
|
|
<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 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 card v-if="!isWeapp" :title="t('customPosition')">
|
|
<van-cell is-link :title="t('positionTop')" @click="showTopToast" />
|
|
<van-cell is-link :title="t('positionBottom')" @click="showBottomToast" />
|
|
</demo-block>
|
|
|
|
<demo-block card :title="t('updateMessage')">
|
|
<van-cell
|
|
is-link
|
|
:title="t('updateMessage')"
|
|
@click="showCustomizedToast"
|
|
/>
|
|
</demo-block>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
i18n: {
|
|
'zh-CN': {
|
|
fail: '失败提示',
|
|
text: '提示内容',
|
|
text2: '成功文案',
|
|
text3: '失败文案',
|
|
text4: (second) => `倒计时 ${second} 秒`,
|
|
title1: '文字提示',
|
|
title2: '加载提示',
|
|
title3: '成功/失败提示',
|
|
success: '成功提示',
|
|
customIcon: '自定义图标',
|
|
customImage: '自定义图片',
|
|
loadingType: '自定义加载图标',
|
|
positionTop: '顶部展示',
|
|
updateMessage: '动态更新提示',
|
|
positionBottom: '底部展示',
|
|
customPosition: '自定义位置',
|
|
},
|
|
'en-US': {
|
|
fail: 'Fail',
|
|
text: 'Some messages',
|
|
text2: 'Success',
|
|
text3: 'Fail',
|
|
text4: (second) => `${second} seconds`,
|
|
title1: 'Text',
|
|
title2: 'Loading',
|
|
title3: 'Success/Fail',
|
|
success: 'Success',
|
|
customIcon: 'Custom Icon',
|
|
customImage: 'Custom Image',
|
|
loadingType: 'Loading Type',
|
|
positionTop: 'Top',
|
|
updateMessage: 'Update Message',
|
|
positionBottom: 'Bottom',
|
|
customPosition: 'Custom Position',
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
showLoadingToast(loadingType) {
|
|
this.$toast.loading({
|
|
forbidClick: true,
|
|
message: this.t('loading'),
|
|
loadingType,
|
|
});
|
|
},
|
|
|
|
showSuccessToast() {
|
|
this.$toast.success(this.t('text2'));
|
|
},
|
|
|
|
showFailToast() {
|
|
this.$toast.fail(this.t('text3'));
|
|
},
|
|
|
|
showTopToast() {
|
|
this.$toast({
|
|
message: this.t('positionTop'),
|
|
position: 'top',
|
|
});
|
|
},
|
|
|
|
showBottomToast() {
|
|
this.$toast({
|
|
message: this.t('positionBottom'),
|
|
position: 'bottom',
|
|
});
|
|
},
|
|
|
|
showIconToast() {
|
|
this.$toast({
|
|
message: this.t('customIcon'),
|
|
icon: 'like-o',
|
|
});
|
|
},
|
|
|
|
showImageToast() {
|
|
this.$toast({
|
|
message: this.t('customImage'),
|
|
icon: 'https://img.yzcdn.cn/vant/logo.png',
|
|
});
|
|
},
|
|
|
|
showCustomizedToast() {
|
|
const toast = this.$toast.loading({
|
|
duration: 0,
|
|
forbidClick: true,
|
|
message: this.t('text4', 3),
|
|
});
|
|
|
|
let second = 3;
|
|
const timer = setInterval(() => {
|
|
second--;
|
|
if (second) {
|
|
toast.message = this.t('text4', second);
|
|
} else {
|
|
clearInterval(timer);
|
|
this.$toast.clear();
|
|
}
|
|
}, 1000);
|
|
},
|
|
},
|
|
};
|
|
</script>
|