From 94b2222c085e30cbc4a7a49dfac13af15aec98b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=95=9D=E8=A3=B3?= <1923740402@qq.com>
Date: Mon, 19 Apr 2021 13:22:33 +0800
Subject: [PATCH] perf: improve countTo (#499)

---
 src/components/CountTo/src/index.vue   |  7 +++++--
 src/components/CountTo/src/props.ts    |  4 ++++
 src/views/demo/comp/count-to/index.vue | 27 ++++++++++++++++++++++----
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/components/CountTo/src/index.vue b/src/components/CountTo/src/index.vue
index cc14c107..544b3fba 100644
--- a/src/components/CountTo/src/index.vue
+++ b/src/components/CountTo/src/index.vue
@@ -1,5 +1,5 @@
 <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);
       }
diff --git a/src/components/CountTo/src/props.ts b/src/components/CountTo/src/props.ts
index 61ee12aa..33b35225 100644
--- a/src/components/CountTo/src/props.ts
+++ b/src/components/CountTo/src/props.ts
@@ -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(''),
diff --git a/src/views/demo/comp/count-to/index.vue b/src/views/demo/comp/count-to/index.vue
index c8cfd136..86cdd9bd 100644
--- a/src/views/demo/comp/count-to/index.vue
+++ b/src/views/demo/comp/count-to/index.vue
@@ -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>