Skip to content

Commit 592c37b

Browse files
PdxLookPdxLook
authored
feat: ✨ 新增statistic 数值显示 (#489)
1 parent 5915922 commit 592c37b

File tree

9 files changed

+499
-0
lines changed

9 files changed

+499
-0
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -365,6 +365,9 @@ export default defineConfig({
365365
}, {
366366
link: "/component/count-down",
367367
text: "CountDown 倒计时"
368+
}, {
369+
link: "/component/statistic",
370+
text: "Statistic 数值显示"
368371
}, {
369372
link: "/component/number-keyboard",
370373
text: "NumberKeyboard 数字键盘"

‎docs/component/statistic.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<frame/>
2+
3+
# Statistic 数值显示
4+
5+
> 1.3.6+ 版本提供
6+
7+
## 基本用法
8+
9+
10+
```vue
11+
<wd-statistic :endVal="2024" suffix="年" color="#16baaa"></wd-statistic>
12+
```
13+
14+
## 插槽
15+
16+
17+
```vue
18+
<wd-statistic prefix="￥" :startVal="0" :decimals="2" :endVal="186.321" :fontSize="32" suffix="%" color="#1e9fff"></wd-statistic>
19+
<wd-statistic prefix="￥" :startVal="0" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ff5722"></wd-statistic>
20+
<wd-statistic prefix="￥" :startVal="0" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ffb800" :duration="2000"></wd-statistic>
21+
```
22+
23+
## 自定义字体颜色
24+
25+
设置 `color` 属性。
26+
27+
```html
28+
<wd-statistic :endVal="2024" color="#16baaa"></wd-statistic>
29+
```
30+
31+
32+
## Attributes
33+
34+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
35+
| ---------- | ------------------------------------------------------------------ | ------- | ------------------------------------------------------------------ | ------- | ---------------- |
36+
| fontSize | 字体大小 | number | 16 | default | 1.3.6+ |
37+
|color | 文本颜色 | string | - | '' | $LOWEST_VERSION$|
38+
|startVal | 起始值 | number | - | 0 | $LOWEST_VERSION$ |
39+
|endVal | 最终值 | number | - | 2024 | $LOWEST_VERSION$ |
40+
|duration | 从起始值到结束值数字变动的时间 | number | - | 3000 | $LOWEST_VERSION$ |
41+
|autoplay | 是否自动播放 | boolean | - | true | $LOWEST_VERSION$ |
42+
|decimals | 保留的小数位数 | number | (需大于等于0) | 0 | $LOWEST_VERSION$ |
43+
|decimal | 小数点符号 | string | - | '.' | $LOWEST_VERSION$ |
44+
|separator | 三位三位的隔开效果 | string | - | ',' | $LOWEST_VERSION$ |
45+
|prefix | 前缀 | string | - | - | $LOWEST_VERSION$ |
46+
|suffix | 后缀 | string | - | - | $LOWEST_VERSION$ |
47+
|useEasing | 是否具有连贯性 | boolean | - | true | $LOWEST_VERSION$ |
48+
|isFrequent | 是否隔一段时间数字跳动 | boolean | - | false | $LOWEST_VERSION$ |
49+
|frequentTime | 跳动间隔时间 | number | - | 5000 | $LOWEST_VERSION$ |
50+
51+
52+
53+
## 外部样式类
54+
55+
| 类名 | 说明 | 最低版本 |
56+
| ------------ | ---------- | ---------------- |
57+
| custom-class | 根节点样式 | $LOWEST_VERSION$ |
58+
| custom-style | 根节点样式 | $LOWEST_VERSION$ |

‎src/pages.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -742,6 +742,16 @@
742742
"navigationBarTitleText": "CountDown 倒计时"
743743
}
744744
},
745+
{
746+
"path": "pages/statistic/Index",
747+
"name": "statistic",
748+
"style": {
749+
"mp-alipay": {
750+
"allowsBounceVertical": "NO"
751+
},
752+
"navigationBarTitleText": "Statistic 数值显示"
753+
}
754+
},
745755
{
746756
"path": "pages/numberKeyboard/Index",
747757
"name": "numberKeyboard",

‎src/pages/index/Index.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,10 @@ const list = ref([
286286
id: 'countDown',
287287
name: 'CountDown 倒计时'
288288
},
289+
{
290+
id: 'statistic',
291+
name: 'Statistic 数值显示'
292+
},
289293
{
290294
id: 'numberKeyboard',
291295
name: 'NumberKeyboard 数字键盘'

‎src/pages/statistic/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-statistic :endVal="endVal" suffix="年" color="#16baaa"></wd-statistic>
5+
</demo-block>
6+
7+
<demo-block title="插槽">
8+
<wd-statistic prefix="￥" :decimals="2" :endVal="186.321" :fontSize="32" suffix="%" color="#1e9fff"></wd-statistic>
9+
<wd-statistic prefix="￥" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ff5722"></wd-statistic>
10+
<wd-statistic prefix="￥" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ffb800" :duration="2000"></wd-statistic>
11+
</demo-block>
12+
13+
<demo-block title="ref方法">
14+
<wd-statistic
15+
ref="refStatistic"
16+
@callback="endFun"
17+
prefix="￥"
18+
:startVal="0"
19+
:decimals="3"
20+
:endVal="9999.32"
21+
:fontSize="32"
22+
suffix="%"
23+
color="#1e9fff"
24+
:duration="3000"
25+
></wd-statistic>
26+
27+
<wd-row :gutter="20">
28+
<wd-col :span="12"><wd-button block @click="refStatistic.start()">启动动画</wd-button></wd-col>
29+
<wd-col :span="12"><wd-button block @click="refStatistic.reset()">重置动画</wd-button></wd-col>
30+
</wd-row>
31+
<wd-row :gutter="20">
32+
<wd-col :span="12"><wd-button block @click="refStatistic.pause()">暂停动画</wd-button></wd-col>
33+
<wd-col :span="12"><wd-button block @click="refStatistic.pauseResume()">切换暂停和恢复状态</wd-button></wd-col>
34+
</wd-row>
35+
</demo-block>
36+
</page-wraper>
37+
</template>
38+
<script lang="ts" setup>
39+
import { ref, onMounted } from 'vue'
40+
41+
const endVal = ref<number>(2024)
42+
const refStatistic = ref(null)
43+
44+
function endFun() {
45+
console.log('endFun')
46+
}
47+
</script>
48+
<style lang="scss" scoped></style>

‎src/uni_modules/wot-design-uni/components/wd-statistic/index.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import '../common/abstracts/variable';
2+
@import '../common/abstracts/mixin';
3+
4+
5+
.wd-statistic{
6+
vertical-align: bottom;
7+
}

‎src/uni_modules/wot-design-uni/components/wd-statistic/requestAnimationFrame.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
let lastTime = 0 // 上一次调用 requestAnimationFrame 的时间戳
2+
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器厂商的前缀
3+
let requestAnimationFrame = null // 用于请求下一帧的函数
4+
let cancelAnimationFrame = null // 用于取消下一帧的函数
5+
let prefix = ''
6+
7+
// #ifdef H5
8+
// 尝试获取浏览器原生的 requestAnimationFrame 和 cancelAnimationFrame 方法
9+
requestAnimationFrame = window.requestAnimationFrame
10+
cancelAnimationFrame = window.cancelAnimationFrame
11+
12+
// 遍历浏览器前缀，获取兼容的 requestAnimationFrame 和 cancelAnimationFrame 实现
13+
for (let i = 0; i < prefixes.length; i++) {
14+
if (requestAnimationFrame && cancelAnimationFrame) {
15+
break
16+
}
17+
prefix = prefixes[i]
18+
// 获取兼容的 requestAnimationFrame 方法
19+
requestAnimationFrame = requestAnimationFrame || window[`${prefix}RequestAnimationFrame`]
20+
// 获取兼容的 cancelAnimationFrame 方法
21+
cancelAnimationFrame = cancelAnimationFrame || window[`${prefix}CancelAnimationFrame`] || window[`${prefix}CancelRequestAnimationFrame`]
22+
}
23+
// #endif
24+
25+
// 如果当前浏览器不支持原生的 requestAnimationFrame 和 cancelAnimationFrame，则使用 setTimeout 作为替代方案
26+
if (!requestAnimationFrame || !cancelAnimationFrame) {
27+
requestAnimationFrame = function (callback) {
28+
const currTime = new Date().getTime()
29+
// 计算到下次调用的时间，尽可能接近每秒60帧的效果
30+
const timeToCall = Math.max(0, 16 - (currTime - lastTime))
31+
const id = setTimeout(() => {
32+
callback(currTime + timeToCall)
33+
}, timeToCall)
34+
lastTime = currTime + timeToCall
35+
return id
36+
}
37+
38+
cancelAnimationFrame = function (id) {
39+
clearTimeout(id)
40+
}
41+
}
42+
43+
export { requestAnimationFrame, cancelAnimationFrame }

‎src/uni_modules/wot-design-uni/components/wd-statistic/types.ts‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import type { ExtractPropTypes } from 'vue'
2+
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
3+
4+
export const textProps = {
5+
...baseProps,
6+
7+
// 字体大小
8+
fontSize: makeNumberProp(16),
9+
10+
// 文本颜色
11+
color: makeStringProp(''),
12+
13+
/**
14+
* 起始值
15+
* 类型：number
16+
* 默认值：0
17+
*/
18+
startVal: makeNumberProp(0),
19+
20+
/**
21+
* 最终值
22+
* 类型：number
23+
* 默认值：2021
24+
*/
25+
endVal: makeNumberProp(2024),
26+
27+
/**
28+
* 从起始值到结束值数字变动的时间
29+
* 类型：number
30+
* 默认值：3000
31+
*/
32+
duration: makeNumberProp(3000),
33+
34+
/**
35+
* 是否自动播放
36+
* 类型：boolean
37+
* 默认值：true
38+
*/
39+
autoplay: makeBooleanProp(true),
40+
41+
/**
42+
* 保留的小数位数
43+
* 类型：number
44+
* 默认值：0
45+
* 校验：大于等于0
46+
*/
47+
decimals: {
48+
type: Number,
49+
required: false,
50+
default: 0,
51+
validator(value: number) {
52+
return value >= 0
53+
}
54+
},
55+
56+
// 小数点
57+
decimal: makeStringProp('.'),
58+
59+
// 三位三位的隔开效果
60+
separator: makeStringProp(','),
61+
62+
/**
63+
* 前缀
64+
* 类型：string
65+
* 默认值：''
66+
* @example '¥' 人民币前缀
67+
*/
68+
prefix: makeStringProp(''),
69+
70+
/**
71+
* 后缀
72+
* 类型：string
73+
* 默认值：''
74+
*/
75+
suffix: makeStringProp(''),
76+
77+
/**
78+
* 是否具有连贯性
79+
* 类型：boolean
80+
* 默认值：true
81+
*/
82+
useEasing: makeBooleanProp(true),
83+
84+
/**
85+
* 是否隔一段时间数字跳动，这里的跳动是隔一段时间设置初始值
86+
* 类型：boolean
87+
* 默认值：false
88+
*/
89+
isFrequent: makeBooleanProp(false),
90+
91+
/**
92+
* 跳动间隔时间
93+
* 类型：number
94+
* 默认值：5000
95+
*/
96+
frequentTime: makeNumberProp(5000),
97+
98+
/**
99+
* 自定义根节点样式
100+
*/
101+
customStyle: makeStringProp(''),
102+
103+
/**
104+
* 自定义根节点样式类
105+
*/
106+
customClass: makeStringProp('')
107+
}
108+
109+
export type TextProps = ExtractPropTypes<typeof textProps>

0 commit comments

Comments
 (0)