feat: ✨ 调整Statistic为CountTo组件并使用useCountDown重构

Moonofweisheng · Aug 9, 2024 · a01baaf · a01baaf
1 parent 661603a
commit a01baaf
Show file tree

Hide file tree

Showing 14 changed files with 327 additions and 398 deletions.
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -1,7 +1,7 @@
 /*
  * @Author: weisheng
  * @Date: 2023-07-27 10:26:09
- * @LastEditTime: 2024-07-19 13:29:51
+ * @LastEditTime: 2024-08-08 17:38:21
  * @LastEditors: weisheng
  * @Description: 
  * @FilePath: \wot-design-uni\docs\.vitepress\config.mts
@@ -366,8 +366,8 @@ export default defineConfig({
             link: "/component/count-down",
             text: "CountDown 倒计时"
           }, {
-            link: "/component/statistic",
-            text: "Statistic 数值显示"
+            link: "/component/count-up",
+            text: "CountTo 数字滚动"
           }, {
             link: "/component/number-keyboard",
             text: "NumberKeyboard 数字键盘"

diff --git a/docs/component/count-to.md b/docs/component/count-to.md
@@ -0,0 +1,109 @@
+<frame/>
+
+# CountTo 数字滚动<el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">$LOWEST_VERSION$</el-tag>
+
+## 基本用法
+
+设置 `endVal` 属性，表示最终值。
+设置 `startVal` 属性，表示起始值。
+设置 `duration` 属性，表示从起始值到结束值数字变动的时间。
+设置 `autoplay` 属性，表示是否自动播放。
+设置 `decimals` 属性，表示保留的小数位数。
+设置 `decimal` 属性，表示小数点符号。
+设置 `prefix` 属性，表示数字前缀。
+设置 `suffix` 属性，表示数字后缀。
+设置 `fontSize` 属性，表示字体大小。
+设置 `color` 属性，表示文本颜色。
+
+```vue
+<wd-count-to :endVal="2024" suffix="年" color="#16baaa"></wd-count-to>
+<wd-count-to prefix="￥" :startVal="0" :decimals="2" :endVal="186.321" :fontSize="32" suffix="%" color="#1e9fff"></wd-count-to>
+<wd-count-to prefix="￥" :startVal="0" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ff5722"></wd-count-to>
+<wd-count-to prefix="￥" :startVal="0" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ffb800" :duration="2000"></wd-count-to>
+```
+
+## 手动控制
+
+通过 `start` 方法开始倒计时，通过 `pause` 方法暂停倒计时，通过 `reset` 方法重置倒计时。
+
+```html
+<wd-count-to
+  ref="countTo"
+  :auto-start="false"
+  prefix="￥"
+  :startVal="1000"
+  :decimals="3"
+  :endVal="9999.32"
+  :fontSize="32"
+  suffix="%"
+  color="#1e9fff"
+></wd-count-to>
+<wd-grid clickable border>
+  <wd-grid-item text="开始" icon="play-circle-stroke" @itemclick="start" />
+  <wd-grid-item text="暂停" icon="pause-circle" @itemclick="pause" />
+  <wd-grid-item text="重置" icon="refresh" @itemclick="reset" />
+</wd-grid>
+```
+
+```ts
+import type { CountToInstance } from '@/uni_modules/wot-design-uni/components/wd-count-to/types'
+
+const countTo = ref<CountToInstance>()
+
+const start = () => {
+  countTo.value!.start()
+}
+const pause = () => {
+  countTo.value!.pause()
+}
+const reset = () => {
+  countTo.value!.reset()
+}
+```
+
+## Attributes
+
+| 参数      | 说明                           | 类型    | 可选值         | 默认值  | 最低版本         |
+| --------- | ------------------------------ | ------- | -------------- | ------- | ---------------- |
+| fontSize  | 字体大小                       | number  | 16             | default | $LOWEST_VERSION$ |
+| color     | 文本颜色                       | string  | -              | ''      | $LOWEST_VERSION$ |
+| startVal  | 起始值                         | number  | -              | 0       | $LOWEST_VERSION$ |
+| endVal    | 最终值                         | number  | -              | 2024    | $LOWEST_VERSION$ |
+| duration  | 从起始值到结束值数字变动的时间 | number  | -              | 3000    | $LOWEST_VERSION$ |
+| autoplay  | 是否自动播放                   | boolean | -              | true    | $LOWEST_VERSION$ |
+| decimals  | 保留的小数位数                 | number  | (需大于等于 0) | 0       | $LOWEST_VERSION$ |
+| decimal   | 小数点符号                     | string  | -              | '.'     | $LOWEST_VERSION$ |
+| separator | 三位三位的隔开效果             | string  | -              | ','     | $LOWEST_VERSION$ |
+| prefix    | 前缀                           | string  | -              | -       | $LOWEST_VERSION$ |
+| suffix    | 后缀                           | string  | -              | -       | $LOWEST_VERSION$ |
+| useEasing | 是否具有连贯性                 | boolean | -              | true    | $LOWEST_VERSION$ |
+
+## Events
+
+| 事件名称 | 说明                 | 参数 | 最低版本         |
+| -------- | -------------------- | ---- | ---------------- |
+| finish   | 动画完成时触发       | —    | $LOWEST_VERSION$ |
+| mounted  | 组件加载完成时时触发 | -    | $LOWEST_VERSION$ |
+
+## Methods
+
+| 方法名 | 说明                                                        | 参数 | 最低版本         |
+| ------ | ----------------------------------------------------------- | ---- | ---------------- |
+| start  | 开始动画                                                    | —    | $LOWEST_VERSION$ |
+| pause  | 暂停动画                                                    | —    | $LOWEST_VERSION$ |
+| reset  | 重置动画，若 `auto-start` 为 `true`，重设后会自动开始倒计时 | —    | $LOWEST_VERSION$ |
+
+## Slots
+
+| 名称 | 说明     | 最低版本 |
+| ---- | -------- | -------- |
+| default    | 默认插槽 | $LOWEST_VERSION$   |
+| prefix    | 前缀插槽 | $LOWEST_VERSION$   |
+| suffix    | 后缀插槽 | $LOWEST_VERSION$   |
+
+## 外部样式类
+
+| 类名         | 说明       | 最低版本         |
+| ------------ | ---------- | ---------------- |
+| custom-class | 根节点样式 | $LOWEST_VERSION$ |
+| custom-style | 根节点样式 | $LOWEST_VERSION$ |
diff --git a/docs/component/statistic.md b/docs/component/statistic.md
diff --git a/src/pages.json b/src/pages.json
@@ -753,13 +753,13 @@
       }
     },
     {
-      "path": "pages/statistic/Index",
-      "name": "statistic",
+      "path": "pages/countTo/Index",
+      "name": "countTo",
       "style": {
         "mp-alipay": {
           "allowsBounceVertical": "NO"
         },
-        "navigationBarTitleText": "Statistic 数值显示"
+        "navigationBarTitleText": "CountTo 数字滚动"
       }
     },
     {

diff --git a/src/pages/countTo/Index.vue b/src/pages/countTo/Index.vue
@@ -0,0 +1,48 @@
+<template>
+  <page-wraper>
+    <demo-block title="基本用法">
+      <wd-count-to :endVal="endVal" suffix="年" color="#16baaa"></wd-count-to>
+      <wd-count-to prefix="￥" :decimals="2" :endVal="186.321" :fontSize="32" suffix="%" color="#1e9fff"></wd-count-to>
+      <wd-count-to prefix="￥" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ff5722"></wd-count-to>
+      <wd-count-to prefix="￥" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ffb800" :duration="2000"></wd-count-to>
+    </demo-block>
+
+    <demo-block title="手动控制">
+      <wd-count-to
+        ref="countTo"
+        :auto-start="false"
+        prefix="￥"
+        :startVal="1000"
+        :decimals="3"
+        :endVal="9999.32"
+        :fontSize="32"
+        suffix="%"
+        color="#1e9fff"
+      ></wd-count-to>
+
+      <wd-grid clickable border>
+        <wd-grid-item text="开始" icon="play-circle-stroke" @itemclick="start" />
+        <wd-grid-item text="暂停" icon="pause-circle" @itemclick="pause" />
+        <wd-grid-item text="重置" icon="refresh" @itemclick="reset" />
+      </wd-grid>
+    </demo-block>
+  </page-wraper>
+</template>
+<script lang="ts" setup>
+import type { CountToInstance } from '@/uni_modules/wot-design-uni/components/wd-count-to/types'
+import { ref } from 'vue'
+
+const endVal = ref<number>(2024)
+const countTo = ref<CountToInstance>()
+
+const start = () => {
+  countTo.value!.start()
+}
+const pause = () => {
+  countTo.value!.pause()
+}
+const reset = () => {
+  countTo.value!.reset()
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/pages/index/Index.vue b/src/pages/index/Index.vue
@@ -287,8 +287,8 @@ const list = ref([
         name: 'CountDown 倒计时'
       },
       {
-        id: 'statistic',
-        name: 'Statistic 数值显示'
+        id: 'countTo',
+        name: 'CountTo 数字滚动'
       },
       {
         id: 'numberKeyboard',

diff --git a/src/pages/statistic/Index.vue b/src/pages/statistic/Index.vue
diff --git a/src/uni_modules/wot-design-uni/components/common/util.ts b/src/uni_modules/wot-design-uni/components/common/util.ts
@@ -708,3 +708,15 @@ export function omitBy<O extends Record<string, any>>(obj: O, predicate: (value:
   Object.keys(newObj).forEach((key) => predicate(newObj[key], key) && delete newObj[key]) // 遍历对象的键，删除值为不满足predicate的字段
   return newObj
 }
+
+/**
+ * 缓动函数，用于在动画或过渡效果中根据时间参数计算当前值
+ * @param t 当前时间，通常是从动画开始经过的时间
+ * @param b 初始值，动画属性的初始值
+ * @param c 变化量，动画属性的目标值与初始值的差值
+ * @param d 持续时间，动画持续的总时间长度
+ * @returns 计算出的当前值
+ */
+export function easingFn(t: number = 0, b: number = 0, c: number = 0, d: number = 0): number {
+  return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
+}
diff --git a/...gn-uni/components/wd-statistic/index.scss → ...ign-uni/components/wd-count-to/index.scss b/...gn-uni/components/wd-statistic/index.scss → ...ign-uni/components/wd-count-to/index.scss
@@ -2,6 +2,6 @@
 @import '../common/abstracts/mixin';
 
 
-.wd-statistic{
+.wd-count-to{
   vertical-align: bottom;
 }