Unverified 提交 94b2222c 作者: 啝裳 提交者: GitHub

perf: improve countTo (#499)

上级 502cc270
<template> <template>
<span> <span :style="{ color: color }">
{{ displayValue }} {{ displayValue }}
</span> </span>
</template> </template>
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
timestamp: number | null; timestamp: number | null;
rAF: any; rAF: any;
remaining: number | null; remaining: number | null;
color: any;
}>({ }>({
localStartVal: props.startVal, localStartVal: props.startVal,
displayValue: formatNumber(props.startVal), displayValue: formatNumber(props.startVal),
...@@ -32,6 +33,7 @@ ...@@ -32,6 +33,7 @@
timestamp: null, timestamp: null,
remaining: null, remaining: null,
rAF: null, rAF: null,
color: null,
}); });
onMounted(() => { onMounted(() => {
...@@ -52,10 +54,11 @@ ...@@ -52,10 +54,11 @@
}); });
function start() { function start() {
const { startVal, duration } = props; const { startVal, duration, color } = props;
state.localStartVal = startVal; state.localStartVal = startVal;
state.startTime = null; state.startTime = null;
state.localDuration = duration; state.localDuration = duration;
state.color = color;
state.paused = false; state.paused = false;
state.rAF = requestAnimationFrame(count); state.rAF = requestAnimationFrame(count);
} }
......
...@@ -13,6 +13,10 @@ export const countToProps = { ...@@ -13,6 +13,10 @@ export const countToProps = {
return value >= 0; return value >= 0;
}, },
}, },
color: {
type: String as PropType<string>,
require: false,
},
decimal: propTypes.string.def('.'), decimal: propTypes.string.def('.'),
separator: propTypes.string.def(','), separator: propTypes.string.def(','),
prefix: propTypes.string.def(''), prefix: propTypes.string.def(''),
......
...@@ -2,16 +2,35 @@ ...@@ -2,16 +2,35 @@
<PageWrapper title="数字动画示例"> <PageWrapper title="数字动画示例">
<Card> <Card>
<CardGrid class="count-to-demo-card"> <CardGrid class="count-to-demo-card">
<CountTo prefix="$" :startVal="1" :endVal="200000" :duration="8000" /> <CountTo prefix="$" :color="'#409EFF'" :startVal="1" :endVal="200000" :duration="8000" />
</CardGrid> </CardGrid>
<CardGrid class="count-to-demo-card"> <CardGrid class="count-to-demo-card">
<CountTo suffix="$" :startVal="1" :endVal="300000" :decimals="2" :duration="6000" /> <CountTo
suffix="$"
:color="'red'"
:startVal="1"
:endVal="300000"
:decimals="2"
:duration="6000"
/>
</CardGrid> </CardGrid>
<CardGrid class="count-to-demo-card"> <CardGrid class="count-to-demo-card">
<CountTo suffix="$" :startVal="1" :endVal="400000" :duration="7000" /> <CountTo
suffix="$"
:color="'rgb(0,238,0)'"
:startVal="1"
:endVal="400000"
:duration="7000"
/>
</CardGrid> </CardGrid>
<CardGrid class="count-to-demo-card"> <CardGrid class="count-to-demo-card">
<CountTo separator="-" :startVal="10000" :endVal="500000" :duration="8000" /> <CountTo
separator="-"
:color="'rgba(138,43,226,.6)'"
:startVal="10000"
:endVal="500000"
:duration="8000"
/>
</CardGrid> </CardGrid>
</Card> </Card>
</PageWrapper> </PageWrapper>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论