|
|
|
@ -1,50 +1,56 @@ |
|
|
|
<template> |
|
|
|
<span :style="{ color: color }"> |
|
|
|
{{ displayValue }} |
|
|
|
<span :style="{ color }"> |
|
|
|
{{ value }} |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
<script lang="ts"> |
|
|
|
import { defineComponent, reactive, computed, watch, onMounted, unref, toRef } from 'vue'; |
|
|
|
import { countToProps } from './props'; |
|
|
|
import { defineComponent, ref, computed, watchEffect, unref, onMounted, watch } from 'vue'; |
|
|
|
import { useTransition, TransitionPresets } from '@vueuse/core'; |
|
|
|
import { isNumber } from '/@/utils/is'; |
|
|
|
|
|
|
|
const props = { |
|
|
|
startVal: { type: Number, default: 0 }, |
|
|
|
endVal: { type: Number, default: 2021 }, |
|
|
|
duration: { type: Number, default: 1500 }, |
|
|
|
autoplay: { type: Boolean, default: true }, |
|
|
|
decimals: { |
|
|
|
type: Number, |
|
|
|
default: 0, |
|
|
|
validator(value: number) { |
|
|
|
return value >= 0; |
|
|
|
}, |
|
|
|
}, |
|
|
|
prefix: { type: String, default: '' }, |
|
|
|
suffix: { type: String, default: '' }, |
|
|
|
separator: { type: String, default: ',' }, |
|
|
|
decimal: { type: String, default: '.' }, |
|
|
|
/** |
|
|
|
* font color |
|
|
|
*/ |
|
|
|
color: { type: String }, |
|
|
|
/** |
|
|
|
* Turn on digital animation |
|
|
|
*/ |
|
|
|
useEasing: { type: Boolean, default: true }, |
|
|
|
/** |
|
|
|
* Digital animation |
|
|
|
*/ |
|
|
|
transition: { type: String, default: 'linear' }, |
|
|
|
}; |
|
|
|
|
|
|
|
export default defineComponent({ |
|
|
|
name: 'CountTo', |
|
|
|
props: countToProps, |
|
|
|
emits: ['mounted', 'callback'], |
|
|
|
props, |
|
|
|
emits: ['onStarted', 'onFinished'], |
|
|
|
setup(props, { emit }) { |
|
|
|
const state = reactive<{ |
|
|
|
localStartVal: number; |
|
|
|
printVal: number | null; |
|
|
|
displayValue: string; |
|
|
|
paused: boolean; |
|
|
|
localDuration: number | null; |
|
|
|
startTime: number | null; |
|
|
|
timestamp: number | null; |
|
|
|
rAF: any; |
|
|
|
remaining: number | null; |
|
|
|
color: any; |
|
|
|
}>({ |
|
|
|
localStartVal: props.startVal, |
|
|
|
displayValue: formatNumber(props.startVal), |
|
|
|
printVal: null, |
|
|
|
paused: false, |
|
|
|
localDuration: props.duration, |
|
|
|
startTime: null, |
|
|
|
timestamp: null, |
|
|
|
remaining: null, |
|
|
|
rAF: null, |
|
|
|
color: null, |
|
|
|
}); |
|
|
|
const source = ref(props.startVal); |
|
|
|
const disabled = ref(false); |
|
|
|
let outputValue = useTransition(source); |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
if (props.autoplay) { |
|
|
|
start(); |
|
|
|
} |
|
|
|
emit('mounted'); |
|
|
|
}); |
|
|
|
const value = computed(() => formatNumber(unref(outputValue))); |
|
|
|
|
|
|
|
const getCountDown = computed(() => { |
|
|
|
return props.startVal > props.endVal; |
|
|
|
watchEffect(() => { |
|
|
|
source.value = props.startVal; |
|
|
|
}); |
|
|
|
|
|
|
|
watch([() => props.startVal, () => props.endVal], () => { |
|
|
|
@ -53,93 +59,42 @@ |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
function start() { |
|
|
|
const { startVal, duration, color } = props; |
|
|
|
state.localStartVal = startVal; |
|
|
|
state.startTime = null; |
|
|
|
state.localDuration = duration; |
|
|
|
state.color = color; |
|
|
|
state.paused = false; |
|
|
|
state.rAF = requestAnimationFrame(count); |
|
|
|
} |
|
|
|
|
|
|
|
function pauseResume() { |
|
|
|
if (state.paused) { |
|
|
|
resume(); |
|
|
|
state.paused = false; |
|
|
|
} else { |
|
|
|
pause(); |
|
|
|
state.paused = true; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function pause() { |
|
|
|
cancelAnimationFrame(state.rAF); |
|
|
|
} |
|
|
|
onMounted(() => { |
|
|
|
props.autoplay && start(); |
|
|
|
}); |
|
|
|
|
|
|
|
function resume() { |
|
|
|
state.startTime = null; |
|
|
|
state.localDuration = +(state.remaining as number); |
|
|
|
state.localStartVal = +(state.printVal as number); |
|
|
|
requestAnimationFrame(count); |
|
|
|
function start() { |
|
|
|
run(); |
|
|
|
source.value = props.endVal; |
|
|
|
} |
|
|
|
|
|
|
|
function reset() { |
|
|
|
state.startTime = null; |
|
|
|
cancelAnimationFrame(state.rAF); |
|
|
|
state.displayValue = formatNumber(props.startVal); |
|
|
|
source.value = props.startVal; |
|
|
|
run(); |
|
|
|
} |
|
|
|
|
|
|
|
function count(timestamp: number) { |
|
|
|
const { useEasing, easingFn, endVal } = props; |
|
|
|
if (!state.startTime) state.startTime = timestamp; |
|
|
|
state.timestamp = timestamp; |
|
|
|
const progress = timestamp - state.startTime; |
|
|
|
state.remaining = (state.localDuration as number) - progress; |
|
|
|
if (useEasing) { |
|
|
|
if (unref(getCountDown)) { |
|
|
|
state.printVal = |
|
|
|
state.localStartVal - |
|
|
|
easingFn(progress, 0, state.localStartVal - endVal, state.localDuration as number); |
|
|
|
} else { |
|
|
|
state.printVal = easingFn( |
|
|
|
progress, |
|
|
|
state.localStartVal, |
|
|
|
endVal - state.localStartVal, |
|
|
|
state.localDuration as number |
|
|
|
); |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (unref(getCountDown)) { |
|
|
|
state.printVal = |
|
|
|
state.localStartVal - |
|
|
|
(state.localStartVal - endVal) * (progress / (state.localDuration as number)); |
|
|
|
} else { |
|
|
|
state.printVal = |
|
|
|
state.localStartVal + |
|
|
|
(endVal - state.localStartVal) * (progress / (state.localDuration as number)); |
|
|
|
} |
|
|
|
} |
|
|
|
if (unref(getCountDown)) { |
|
|
|
state.printVal = state.printVal < endVal ? endVal : state.printVal; |
|
|
|
} else { |
|
|
|
state.printVal = state.printVal > endVal ? endVal : state.printVal; |
|
|
|
} |
|
|
|
state.displayValue = formatNumber(state.printVal); |
|
|
|
if (progress < (state.localDuration as number)) { |
|
|
|
state.rAF = requestAnimationFrame(count); |
|
|
|
} else { |
|
|
|
emit('callback'); |
|
|
|
} |
|
|
|
function run() { |
|
|
|
outputValue = useTransition(source, { |
|
|
|
disabled, |
|
|
|
duration: props.duration, |
|
|
|
onFinished: () => emit('onFinished'), |
|
|
|
onStarted: () => emit('onStarted'), |
|
|
|
...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {}), |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function formatNumber(num: number | string) { |
|
|
|
if (!num) { |
|
|
|
return ''; |
|
|
|
} |
|
|
|
const { decimals, decimal, separator, suffix, prefix } = props; |
|
|
|
num = Number(num).toFixed(decimals); |
|
|
|
num += ''; |
|
|
|
|
|
|
|
const x = num.split('.'); |
|
|
|
let x1 = x[0]; |
|
|
|
const x2 = x.length > 1 ? decimal + x[1] : ''; |
|
|
|
|
|
|
|
const rgx = /(\d+)(\d{3})/; |
|
|
|
if (separator && !isNumber(separator)) { |
|
|
|
while (rgx.test(x1)) { |
|
|
|
@ -149,14 +104,7 @@ |
|
|
|
return prefix + x1 + x2 + suffix; |
|
|
|
} |
|
|
|
|
|
|
|
return { |
|
|
|
count, |
|
|
|
reset, |
|
|
|
resume, |
|
|
|
start, |
|
|
|
pauseResume, |
|
|
|
displayValue: toRef(state, 'displayValue'), |
|
|
|
}; |
|
|
|
return { value, start, reset }; |
|
|
|
}, |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
Vben
5 years ago