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

perf: improve countTo (#499)

上级 502cc270
<template>
<span>
<span :style="{ color: color }">
{{ displayValue }}
</span>
</template>
......@@ -22,6 +22,7 @@
timestamp: number | null;
rAF: any;
remaining: number | null;
color: any;
}>({
localStartVal: props.startVal,
displayValue: formatNumber(props.startVal),
......@@ -32,6 +33,7 @@
timestamp: null,
remaining: null,
rAF: null,
color: null,
});
onMounted(() => {
......@@ -52,10 +54,11 @@
});
function start() {
const { startVal, duration } = props;
const { startVal, duration, color } = props;
state.localStartVal = startVal;
state.startTime = null;
state.localDuration = duration;
state.color = color;
state.paused = false;
state.rAF = requestAnimationFrame(count);
}
......
......@@ -13,6 +13,10 @@ export const countToProps = {
return value >= 0;
},
},
color: {
type: String as PropType<string>,
require: false,
},
decimal: propTypes.string.def('.'),
separator: propTypes.string.def(','),
prefix: propTypes.string.def(''),
......
......@@ -2,16 +2,35 @@
<PageWrapper title="数字动画示例">
<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 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 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 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>
</Card>
</PageWrapper>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论