feat: add countTo example

src/components/countTo/src/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <span>{{ displayValue }}</span>
+  <span :style="{color: color}">{{ displayValue }}</span>
 </template>
 <script lang="ts">
 import {
@@ -28,6 +28,7 @@ export default defineComponent({
       timestamp: number | null;
       rAF: any;
       remaining: number | null;
+      color: any;
     }>({
       localStartVal: props.startVal,
       displayValue: formatNumber(props.startVal),
@@ -37,7 +38,8 @@ export default defineComponent({
       startTime: null,
       timestamp: null,
       remaining: null,
-      rAF: null
+      rAF: null,
+      color: null
     });
 
     onMounted(() => {
@@ -58,11 +60,12 @@ export default defineComponent({
     });
 
     function start() {
-      const { startVal, duration } = props;
+      const { startVal, duration, color } = props;
       state.localStartVal = startVal;
       state.startTime = null;
       state.localDuration = duration;
       state.paused = false;
+      state.color = color;
       state.rAF = requestAnimationFrame(count);
     }
 

src/components/countTo/src/props.ts

@@ -1,3 +1,4 @@
+import { strict } from 'assert'
 import { PropType } from 'vue'
 import { propTypes } from '/@/utils/propTypes'
 export const countToProps = {
@@ -13,6 +14,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(''),

src/locales/ch.json

@@ -15,5 +15,6 @@
   "draggable": "拖拽组件",
   "split-pane": "切割面板",
   "button": "按钮组件",
-  "cropping": "图片裁剪"
+  "cropping": "图片裁剪",
+  "countTo": "数字动画"
 }

src/locales/en.json

@@ -15,5 +15,6 @@
   "draggable": "Draggable Components",
   "split-pane": "Split Pane",
   "button": "Button Components",
-  "cropping": "Picture Cropping"
+  "cropping": "Picture Cropping",
+  "countTo": "Digital Animation"
 }

src/router/index.ts

@@ -85,6 +85,15 @@ const routes: Array<RouteRecordRaw> = [
           showLink: false,
           savedPosition: true
         }
+      },
+      {
+        path: '/components/countTo',
+        component: () => import(/* webpackChunkName: "components" */ '../views/components/countTo/index.vue'),
+        meta: {
+          title: 'countTo',
+          showLink: false,
+          savedPosition: true
+        }
       }
     ],
     meta: {

src/views/components/countTo/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div style="margin:10px">
+    <el-row :gutter="10">
+      <el-col :span="10">
+        <el-card shadow="always">
+          <CountTo prefix="$" :color="'#409EFF'" :startVal="1" :endVal="1000" />
+        </el-card>
+      </el-col>
+      <el-col :span="10">
+        <el-card shadow="always">
+          <CountTo prefix="$" :color="'green'" :startVal="1" :endVal="1500" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script lang='ts'>
+import CountTo from "../../../components/countTo/src/index.vue";
+export default {
+  components: {
+    CountTo
+  },
+  setup() {
+    return {};
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-card) {
+  text-align: center;
+}
+</style>

src/views/welcome.vue

@@ -17,19 +17,17 @@
 
     <!-- 图表 -->
     <el-card class="box-card">
-    <el-skeleton  style="height: 50vh" :rows="8" :loading="loading" animated>
-      <template #default>
+      <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
+        <template #default>
           <div id="brokenLine"></div>
-      </template>
-    </el-skeleton>
+        </template>
+      </el-skeleton>
     </el-card>
-    <!-- <CountTo prefix="$" :startVal="1" :endVal="200" /> -->
   </div>
 </template>
 
 <script lang='ts'>
 import flop from "../components/flop/index.vue";
-import CountTo from "../components/countTo/src/index.vue";
 import { ref, computed, onMounted, inject, nextTick } from "vue";
 import { deviceDetection } from "../utils/deviceDetection";
 import { echartsJson } from "../api/mock";
@@ -39,8 +37,7 @@ let brokenLine: any = null; //折线图实例
 export default {
   name: "welcome",
   components: {
-    flop,
-    CountTo,
+    flop
   },
   setup() {
     let mobile = ref(deviceDetection());
@@ -50,9 +47,9 @@ export default {
 
     setTimeout(() => {
       loading.value = !loading.value;
-      nextTick(()=>{
+      nextTick(() => {
         initbrokenLine();
-      })
+      });
     }, 2000);
 
     let greetings = computed(() => {
@@ -74,39 +71,39 @@ export default {
         brokenLine.setOption({
           title: {
             text: "上海 空气质量指数",
-            left: "1%",
+            left: "1%"
           },
           tooltip: {
-            trigger: "axis",
+            trigger: "axis"
           },
           grid: {
             left: "5%",
             right: "15%",
-            bottom: "10%",
+            bottom: "10%"
           },
           xAxis: {
-            data: info.map(function (item) {
+            data: info.map(function(item) {
               return item[0];
-            }),
+            })
           },
           yAxis: {},
           toolbox: {
             right: 10,
             feature: {
               dataZoom: {
-                yAxisIndex: "none",
+                yAxisIndex: "none"
               },
               restore: {},
-              saveAsImage: {},
-            },
+              saveAsImage: {}
+            }
           },
           dataZoom: [
             {
-              startValue: "2014-06-01",
+              startValue: "2014-06-01"
             },
             {
-              type: "inside",
-            },
+              type: "inside"
+            }
           ],
           visualMap: {
             top: 50,
@@ -115,78 +112,78 @@ export default {
               {
                 gt: 0,
                 lte: 50,
-                color: "#93CE07",
+                color: "#93CE07"
               },
               {
                 gt: 50,
                 lte: 100,
-                color: "#FBDB0F",
+                color: "#FBDB0F"
               },
               {
                 gt: 100,
                 lte: 150,
-                color: "#FC7D02",
+                color: "#FC7D02"
               },
               {
                 gt: 150,
                 lte: 200,
-                color: "#FD0100",
+                color: "#FD0100"
               },
               {
                 gt: 200,
                 lte: 300,
-                color: "#AA069F",
+                color: "#AA069F"
               },
               {
                 gt: 300,
-                color: "#AC3B2A",
-              },
+                color: "#AC3B2A"
+              }
             ],
             outOfRange: {
-              color: "#999",
-            },
+              color: "#999"
+            }
           },
           series: {
             name: "上海 空气质量指数",
             type: "line",
-            data: info.map(function (item) {
+            data: info.map(function(item) {
               return item[1];
             }),
             markLine: {
               silent: true,
               lineStyle: {
-                color: "#333",
+                color: "#333"
               },
               data: [
                 {
-                  yAxis: 50,
+                  yAxis: 50
                 },
                 {
-                  yAxis: 100,
+                  yAxis: 100
                 },
                 {
-                  yAxis: 150,
+                  yAxis: 150
                 },
                 {
-                  yAxis: 200,
+                  yAxis: 200
                 },
                 {
-                  yAxis: 300,
-                },
-              ],
-            },
-          },
+                  yAxis: 300
+                }
+              ]
+            }
+          }
         });
       });
     };
 
-    const openDepot = ():void => {
-      window.open('https://github.com/xiaoxian521/vue-pure-admin')
-    }
+    const openDepot = (): void => {
+      window.open("https://github.com/xiaoxian521/vue-pure-admin");
+    };
 
     onMounted(() => {
       useEventListener("resize", () => {
-        if(!brokenLine) return;
+        if (!brokenLine) return;
         brokenLine.resize();
       });
     });
@@ -197,7 +194,7 @@ export default {
       loading,
       openDepot
     };
-  },
+  }
 };
 </script>