Skip to content

Commit a01baaf

Browse files
xuqingkaiMoonofweisheng
xuqingkai
authored and
Moonofweisheng
committed
feat: ✨ 调整Statistic为CountTo组件并使用useCountDown重构
1 parent 661603a commit a01baaf

File tree

14 files changed

+327
-398
lines changed

14 files changed

+327
-398
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* @Author: weisheng
33
* @Date: 2023-07-27 10:26:09
4-
* @LastEditTime: 2024-07-19 13:29:51
4+
* @LastEditTime: 2024-08-08 17:38:21
55
* @LastEditors: weisheng
66
* @Description:
77
* @FilePath: \wot-design-uni\docs\.vitepress\config.mts
@@ -366,8 +366,8 @@ export default defineConfig({
366366
link: "/component/count-down",
367367
text: "CountDown 倒计时"
368368
}, {
369-
link: "/component/statistic",
370-
text: "Statistic 数值显示"
369+
link: "/component/count-up",
370+
text: "CountTo 数字滚动"
371371
}, {
372372
link: "/component/number-keyboard",
373373
text: "NumberKeyboard 数字键盘"

‎docs/component/count-to.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<frame/>
2+
3+
# CountTo 数字滚动<el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">$LOWEST_VERSION$</el-tag>
4+
5+
## 基本用法
6+
7+
设置 `endVal` 属性，表示最终值。
8+
设置 `startVal` 属性，表示起始值。
9+
设置 `duration` 属性，表示从起始值到结束值数字变动的时间。
10+
设置 `autoplay` 属性，表示是否自动播放。
11+
设置 `decimals` 属性，表示保留的小数位数。
12+
设置 `decimal` 属性，表示小数点符号。
13+
设置 `prefix` 属性，表示数字前缀。
14+
设置 `suffix` 属性，表示数字后缀。
15+
设置 `fontSize` 属性，表示字体大小。
16+
设置 `color` 属性，表示文本颜色。
17+
18+
```vue
19+
<wd-count-to :endVal="2024" suffix="年" color="#16baaa"></wd-count-to>
20+
<wd-count-to prefix="￥" :startVal="0" :decimals="2" :endVal="186.321" :fontSize="32" suffix="%" color="#1e9fff"></wd-count-to>
21+
<wd-count-to prefix="￥" :startVal="0" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ff5722"></wd-count-to>
22+
<wd-count-to prefix="￥" :startVal="0" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ffb800" :duration="2000"></wd-count-to>
23+
```
24+
25+
## 手动控制
26+
27+
通过 `start` 方法开始倒计时，通过 `pause` 方法暂停倒计时，通过 `reset` 方法重置倒计时。
28+
29+
```html
30+
<wd-count-to
31+
ref="countTo"
32+
:auto-start="false"
33+
prefix="￥"
34+
:startVal="1000"
35+
:decimals="3"
36+
:endVal="9999.32"
37+
:fontSize="32"
38+
suffix="%"
39+
color="#1e9fff"
40+
></wd-count-to>
41+
<wd-grid clickable border>
42+
<wd-grid-item text="开始" icon="play-circle-stroke" @itemclick="start" />
43+
<wd-grid-item text="暂停" icon="pause-circle" @itemclick="pause" />
44+
<wd-grid-item text="重置" icon="refresh" @itemclick="reset" />
45+
</wd-grid>
46+
```
47+
48+
```ts
49+
import type { CountToInstance } from '@/uni_modules/wot-design-uni/components/wd-count-to/types'
50+
51+
const countTo = ref<CountToInstance>()
52+
53+
const start = () => {
54+
countTo.value!.start()
55+
}
56+
const pause = () => {
57+
countTo.value!.pause()
58+
}
59+
const reset = () => {
60+
countTo.value!.reset()
61+
}
62+
```
63+
64+
## Attributes
65+
66+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
67+
| --------- | ------------------------------ | ------- | -------------- | ------- | ---------------- |
68+
| fontSize | 字体大小 | number | 16 | default | $LOWEST_VERSION$ |
69+
| color | 文本颜色 | string | - | '' | $LOWEST_VERSION$ |
70+
| startVal | 起始值 | number | - | 0 | $LOWEST_VERSION$ |
71+
| endVal | 最终值 | number | - | 2024 | $LOWEST_VERSION$ |
72+
| duration | 从起始值到结束值数字变动的时间 | number | - | 3000 | $LOWEST_VERSION$ |
73+
| autoplay | 是否自动播放 | boolean | - | true | $LOWEST_VERSION$ |
74+
| decimals | 保留的小数位数 | number | (需大于等于 0) | 0 | $LOWEST_VERSION$ |
75+
| decimal | 小数点符号 | string | - | '.' | $LOWEST_VERSION$ |
76+
| separator | 三位三位的隔开效果 | string | - | ',' | $LOWEST_VERSION$ |
77+
| prefix | 前缀 | string | - | - | $LOWEST_VERSION$ |
78+
| suffix | 后缀 | string | - | - | $LOWEST_VERSION$ |
79+
| useEasing | 是否具有连贯性 | boolean | - | true | $LOWEST_VERSION$ |
80+
81+
## Events
82+
83+
| 事件名称 | 说明 | 参数 | 最低版本 |
84+
| -------- | -------------------- | ---- | ---------------- |
85+
| finish | 动画完成时触发 | — | $LOWEST_VERSION$ |
86+
| mounted | 组件加载完成时时触发 | - | $LOWEST_VERSION$ |
87+
88+
## Methods
89+
90+
| 方法名 | 说明 | 参数 | 最低版本 |
91+
| ------ | ----------------------------------------------------------- | ---- | ---------------- |
92+
| start | 开始动画 | — | $LOWEST_VERSION$ |
93+
| pause | 暂停动画 | — | $LOWEST_VERSION$ |
94+
| reset | 重置动画，若 `auto-start` 为 `true`，重设后会自动开始倒计时 | — | $LOWEST_VERSION$ |
95+
96+
## Slots
97+
98+
| 名称 | 说明 | 最低版本 |
99+
| ---- | -------- | -------- |
100+
| default | 默认插槽 | $LOWEST_VERSION$ |
101+
| prefix | 前缀插槽 | $LOWEST_VERSION$ |
102+
| suffix | 后缀插槽 | $LOWEST_VERSION$ |
103+
104+
## 外部样式类
105+
106+
| 类名 | 说明 | 最低版本 |
107+
| ------------ | ---------- | ---------------- |
108+
| custom-class | 根节点样式 | $LOWEST_VERSION$ |
109+
| custom-style | 根节点样式 | $LOWEST_VERSION$ |

‎docs/component/statistic.md‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎src/pages.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -753,13 +753,13 @@
753753
}
754754
},
755755
{
756-
"path": "pages/statistic/Index",
757-
"name": "statistic",
756+
"path": "pages/countTo/Index",
757+
"name": "countTo",
758758
"style": {
759759
"mp-alipay": {
760760
"allowsBounceVertical": "NO"
761761
},
762-
"navigationBarTitleText": "Statistic 数值显示"
762+
"navigationBarTitleText": "CountTo 数字滚动"
763763
}
764764
},
765765
{

‎src/pages/countTo/Index.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<page-wraper>
3+
<demo-block title="基本用法">
4+
<wd-count-to :endVal="endVal" suffix="年" color="#16baaa"></wd-count-to>
5+
<wd-count-to prefix="￥" :decimals="2" :endVal="186.321" :fontSize="32" suffix="%" color="#1e9fff"></wd-count-to>
6+
<wd-count-to prefix="￥" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ff5722"></wd-count-to>
7+
<wd-count-to prefix="￥" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ffb800" :duration="2000"></wd-count-to>
8+
</demo-block>
9+
10+
<demo-block title="手动控制">
11+
<wd-count-to
12+
ref="countTo"
13+
:auto-start="false"
14+
prefix="￥"
15+
:startVal="1000"
16+
:decimals="3"
17+
:endVal="9999.32"
18+
:fontSize="32"
19+
suffix="%"
20+
color="#1e9fff"
21+
></wd-count-to>
22+
23+
<wd-grid clickable border>
24+
<wd-grid-item text="开始" icon="play-circle-stroke" @itemclick="start" />
25+
<wd-grid-item text="暂停" icon="pause-circle" @itemclick="pause" />
26+
<wd-grid-item text="重置" icon="refresh" @itemclick="reset" />
27+
</wd-grid>
28+
</demo-block>
29+
</page-wraper>
30+
</template>
31+
<script lang="ts" setup>
32+
import type { CountToInstance } from '@/uni_modules/wot-design-uni/components/wd-count-to/types'
33+
import { ref } from 'vue'
34+
35+
const endVal = ref<number>(2024)
36+
const countTo = ref<CountToInstance>()
37+
38+
const start = () => {
39+
countTo.value!.start()
40+
}
41+
const pause = () => {
42+
countTo.value!.pause()
43+
}
44+
const reset = () => {
45+
countTo.value!.reset()
46+
}
47+
</script>
48+
<style lang="scss" scoped></style>

‎src/pages/index/Index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -287,8 +287,8 @@ const list = ref([
287287
name: 'CountDown 倒计时'
288288
},
289289
{
290-
id: 'statistic',
291-
name: 'Statistic 数值显示'
290+
id: 'countTo',
291+
name: 'CountTo 数字滚动'
292292
},
293293
{
294294
id: 'numberKeyboard',

‎src/pages/statistic/Index.vue‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎src/uni_modules/wot-design-uni/components/common/util.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -708,3 +708,15 @@ export function omitBy<O extends Record<string, any>>(obj: O, predicate: (value:
708708
Object.keys(newObj).forEach((key) => predicate(newObj[key], key) && delete newObj[key]) // 遍历对象的键，删除值为不满足predicate的字段
709709
return newObj
710710
}
711+
712+
/**
713+
* 缓动函数，用于在动画或过渡效果中根据时间参数计算当前值
714+
* @param t 当前时间，通常是从动画开始经过的时间
715+
* @param b 初始值，动画属性的初始值
716+
* @param c 变化量，动画属性的目标值与初始值的差值
717+
* @param d 持续时间，动画持续的总时间长度
718+
* @returns 计算出的当前值
719+
*/
720+
export function easingFn(t: number = 0, b: number = 0, c: number = 0, d: number = 0): number {
721+
return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
722+
}

src/uni_modules/wot-design-uni/components/wd-statistic/index.scss renamed to src/uni_modules/wot-design-uni/components/wd-count-to/index.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
@import '../common/abstracts/mixin';
33

44

5-
.wd-statistic{
5+
.wd-count-to{
66
vertical-align: bottom;
77
}

0 commit comments

Comments
 (0)