perf: improve countTo (#499)

vbenjs · Apr 19, 2021 · 94b2222 · 94b2222
1 parent 502cc27
commit 94b2222
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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>