158 lines
3.8 KiB
Vue
158 lines
3.8 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 lang="ts">
|
|
import { useTranslate } from '@demo/use-translate';
|
|
import type { LoadingType } from '../../loading';
|
|
import Toast from '..';
|
|
|
|
const i18n = {
|
|
'zh-CN': {
|
|
fail: '失败提示',
|
|
text: '提示内容',
|
|
text2: '成功文案',
|
|
text3: '失败文案',
|
|
text4: (second: number) => `倒计时 ${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: number) => `${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',
|
|
},
|
|
};
|
|
|
|
export default {
|
|
setup() {
|
|
const t = useTranslate(i18n);
|
|
|
|
const showLoadingToast = (loadingType: LoadingType) => {
|
|
Toast.loading({
|
|
forbidClick: true,
|
|
message: t('loading'),
|
|
loadingType,
|
|
});
|
|
};
|
|
|
|
const showSuccessToast = () => {
|
|
Toast.success(t('text2'));
|
|
};
|
|
|
|
const showFailToast = () => {
|
|
Toast.fail(t('text3'));
|
|
};
|
|
|
|
const showTopToast = () => {
|
|
Toast({
|
|
message: t('positionTop'),
|
|
position: 'top',
|
|
});
|
|
};
|
|
|
|
const showBottomToast = () => {
|
|
Toast({
|
|
message: t('positionBottom'),
|
|
position: 'bottom',
|
|
});
|
|
};
|
|
|
|
const showIconToast = () => {
|
|
Toast({
|
|
message: t('customIcon'),
|
|
icon: 'like-o',
|
|
});
|
|
};
|
|
|
|
const showImageToast = () => {
|
|
Toast({
|
|
message: t('customImage'),
|
|
icon: 'https://img.yzcdn.cn/vant/logo.png',
|
|
});
|
|
};
|
|
|
|
const showCustomizedToast = () => {
|
|
const toast = Toast.loading({
|
|
duration: 0,
|
|
forbidClick: true,
|
|
message: t('text4', 3),
|
|
});
|
|
|
|
let second = 3;
|
|
const timer = setInterval(() => {
|
|
second--;
|
|
if (second) {
|
|
toast.message = t('text4', second);
|
|
} else {
|
|
clearInterval(timer);
|
|
Toast.clear();
|
|
}
|
|
}, 1000);
|
|
};
|
|
|
|
return {
|
|
t,
|
|
showTopToast,
|
|
showFailToast,
|
|
showIconToast,
|
|
showImageToast,
|
|
showBottomToast,
|
|
showLoadingToast,
|
|
showSuccessToast,
|
|
showCustomizedToast,
|
|
};
|
|
},
|
|
};
|
|
</script>
|