xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-22 19:46:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf(components): perf count-to

Browse Source
This commit is contained in:
Soybean 2024-01-25 23:16:12 +08:00
parent 9cc7ee5c94
commit b2c61f0306
1 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/custom/count-to.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { computed, nextTick, ref, watch } from 'vue';
import { TransitionPresets, useTransition } from '@vueuse/core';
defineOptions({
@ -8,32 +8,42 @@ defineOptions({
const props = withDefaults(defineProps<Props>(), {
startValue: 0,
endValue: 2024,
endValue: 2021,
duration: 1500,
autoplay: true,
decimals: 0,
prefix: '',
suffix: '',
separator: ',',
decimal: '.'
decimal: '.',
useEasing: true,
transition: 'linear'
});
type TransitionKey = keyof typeof TransitionPresets;
interface Props {
startValue?: number;
endValue?: number;
duration?: number;
autoplay?: boolean;
decimals?: number;
prefix?: string;
suffix?: string;
separator?: string;
decimal?: string;
useEasing?: boolean;
transition?: TransitionKey;
}
const source = ref(0);
const source = ref(props.startValue);
const transition = computed(() => (props.useEasing ? TransitionPresets[props.transition] : undefined));
const outputValue = useTransition(source, {
disabled: false,
duration: 1500,
transition: TransitionPresets.easeOutCubic
duration: props.duration,
transition: transition.value
});
const value = computed(() => formatValue(outputValue.value));
@ -57,11 +67,16 @@ function formatValue(num: number) {
return prefix + x1 + x2 + suffix;
}
async function start() {
await nextTick();
source.value = props.endValue;
}
watch(
[() => props.startValue, () => props.endValue],
() => {
if (props.autoplay) {
source.value = props.endValue;
start();
}
},
{ immediate: true }