feat: 加上数字动画demo

package.json

@@ -26,6 +26,7 @@
     "dayjs": "^1.11.3",
     "echarts": "^5.3.3",
     "element-plus": "^2.2.8",
+    "format-number": "^3.0.0",
     "jquery": "^3.6.0",
     "js-cookie": "^3.0.1",
     "lodash-es": "^4.17.21",

src/locales/lang/en/menu.json

@@ -12,5 +12,6 @@
   "多级菜单1-2": "Multilevel Menu 1-2",
   "组件": "Components",
   "编辑器": "Editor",
-  "表格": "Table"
+  "表格": "Table",
+  "数字动画": "Digital Animation"
 }

src/router/routes/components/0-number.ts

@@ -0,0 +1,8 @@
+import { RouteRecordRaw } from 'vue-router';
+export const routes: RouteRecordRaw[] = [
+  {
+    path: 'number',
+    component: () => import('@/views/components/number.vue'),
+    meta: { title: '数字动画' },
+  },
+];

src/views/components/number.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="number">
+    <el-card header="数字动画">
+      <h1><me-number v-bind="props"></me-number></h1>
+      <el-form label-width="150px" inline>
+        <el-form-item label="起始值">
+          <el-input-number v-model="props.start"></el-input-number>
+        </el-form-item>
+        <el-form-item label="结束值">
+          <el-input-number v-model="props.end[0]"></el-input-number>
+        </el-form-item>
+        <el-form-item label="前缀">
+          <el-input v-model="props.end[1]"></el-input>
+        </el-form-item>
+        <el-form-item label="后缀">
+          <el-input v-model="props.end[2]"></el-input>
+        </el-form-item>
+        <el-form-item label="延时时间(ms)">
+          <el-input-number v-model="props.delay" :min="0"></el-input-number>
+        </el-form-item>
+        <el-form-item label="持续时间(ms)">
+          <el-input-number v-model="props.duration" :min="0"></el-input-number>
+        </el-form-item>
+      </el-form>
+      <div class="footer">
+        <el-button @click="start()" type="success">开始</el-button>
+        <el-button @click="props.disabled = true" type="danger">停止</el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script setup lang="ts" name="Number">
+const props = reactive({
+  start: 0,
+  end: [3668228.35, '$', '元'] as [number, string, string], //100000000
+  delay: 200,
+  disabled: false,
+  duration: 1000,
+});
+const start = async () => {
+  const endNumber = props.end[0];
+  props.disabled = true;
+  props.end[0] = props.start;
+  await nextTick();
+  props.disabled = false;
+  props.end[0] = endNumber;
+};
+</script>
+<style lang="scss" scoped>
+.number {
+  h1 {
+    text-align: center;
+    font-size: 1.5em;
+  }
+  :deep(.el-input) {
+    width: 150px;
+  }
+  .footer {
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>