vue3 | 数据可视化实现数字滚动特效

杨利霞

vue3 | 数据可视化实现数字滚动特效

; U3 U/ P1 L3 U8 e# I1 l" }$ C/ c前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
% y- M$ e4 G* S& I的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


思路
: d( t3 B; X( |- \* s使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

文件目录
8 L: a, w1 \" I4 v; Z8 t
8 m; ^; w$ G' {; N4 F9 h
- O+ U5 d/ E' T/ u1 u0 Z& f5 q使用示例
<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
* \& _9 W3 ~/ { :duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
, f' z. U4 F, E9 B suffix="rmb" // 后缀符号
/>
3 x( Y+ B8 x* C! a; A" u/ ~1
2
! w% Z" X8 L0 M" l* T3
4 f6 S7 r1 M9 V1 j7 H' Y4
5
0 W! y9 t  g3 u& v* R' j! Y6
2 r, B' V& {$ u7
  t# A  Z# s: o0 [( p# J+ p8
4 D+ G& Z( V# l8 k& Z/ J0 L% B- d入口文件index.js
# _1 g2 ?" y# u) A, y( C# Z
* B/ b  Z) k( yconst UILib = {
& J) K6 i& l2 S" \6 `) E/ ~" x  install(Vue) {
( a( E( w, c9 u5 k( j    Vue.component('CountTo', CountTo)
  }
8 s' [7 g% \& x" r( X4 j" _8 b* h  ~}

( p. |8 v% k- }3 Nexport default UILib
$ @% e% V+ t  T' s; Y! e
  |2 [7 s9 f* d+ c+ K& I! r# L1
2
" i- k, A2 a: O6 G' R8 q3
' I$ u) ]: }+ _3 x4
5
6
7
8
8 z" p+ M& X/ {, V0 S9
9 w% y5 Q$ f; f/ X4 e" P3 q( {* W) @main.js使用
import CountTo from './components/count-to/index';
app.use(CountTo)
( Q: |+ Y7 Q" u% ^1
2
+ ]. r  \3 K+ |: ^  @6 mrequestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
/ ^# m2 i# j7 J9 w如果是浏览器判断浏览器内核类型
8 i4 X! y) i+ N: z1 J9 j; t如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
" n! w1 |, X3 G- V  o# S9 f" @* G2 P各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
) A+ y0 [6 _# |$ U) F6 Ylet prefix;
8 h  S2 V2 q+ t* U! xlet requestAnimationFrame;
5 a% ~' y5 T3 V% k# p7 N8 N. [5 Dlet cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
4 r: q/ W/ ~, Z# z9 P, d2 k        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

+ M9 W9 Q9 i& v$ i3 ]  //不支持使用setTimeout方式替换：模拟60帧的效果
- N/ _3 ?% I0 c+ S7 {  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
5 v9 _% a: x$ j' E; P) a            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
/ u% w" H$ m, m1 ^% z; j            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
: ?  I) U+ o5 D  X1 F1 d            lastTime = currTime + timeToCall
            return id
* ^0 D! D1 E0 O3 a$ ]2 z/ {        }

/ @( u% ~. M9 o) G        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
4 O& \9 h  G4 S! k  W3 D    }
" ~( e- e; c1 |
1
2
9 Z$ V5 H( s$ d/ L' Q' t9 k3
4
% n/ T9 o" S6 p4 o4 t5 a5
6
7
' [% Q7 i# k% H9 j8
9
8 s- ]2 ?; l" P10
11
12
9 o+ C4 S! ]) ?7 c  H' q13
' w7 O  C: D. ]. S4 y) ^14
0 _( z/ n' @) \: c; S- M15
16
! j) `+ \: ~$ x9 ?17
18
19
: z0 T$ ~! E% p20
21
22
23
24
25
26
! w/ l3 Q6 j" v27
, y. S5 ]8 p2 q9 F' t4 l% x28
% n. m1 }7 L. w% B! Y9 W  l29
30
6 R: f4 c& E; Z2 r4 M" r$ O6 I31
32
; E" J+ g1 j! U0 D7 v5 v. |完整代码：
requestAnimationFrame.js
: ~7 }0 [' j# X: [) r& o; ^
let lastTime = 0
; n6 ]- Q. k  u) v; kconst prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

/ T5 _, e" y( rlet requestAnimationFrame
0 _- L9 D& K# c+ Ylet cancelAnimationFrame
) G! `1 m! e1 a) S/ W/ W
& ]; h+ u. l  z  k+ {$ N// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
6 i% r2 D5 k. ?" l7 c" [if (isServer) {
    requestAnimationFrame = function () {
- O8 ~" ]2 f- h        return
    }
    cancelAnimationFrame = function () {
        return
9 S; k& v$ q7 F1 A$ e; ~    }
! G& O0 T: H' N7 g} else {
    requestAnimationFrame = window.requestAnimationFrame
2 c. U+ `- o8 ]! Q( f, h0 I& }$ _4 n    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
: Y+ J$ @* U' l. P    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
& k7 N; _1 O) j8 h0 T    for (let i = 0; i < prefixes.length; i++) {
  k: S4 U. j& F& d" A. Y; ~        if (requestAnimationFrame && cancelAnimationFrame) { break }
/ q* y( B: f# a6 Y6 K3 j5 Z1 Z& ~        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
  _$ M3 Q% D; i! M1 K3 Q
    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
% X! g' N! l8 l/ ?$ G# F        requestAnimationFrame = function (callback) {
  s& z3 e* h% W0 x1 y            const currTime = new Date().getTime()
( |! }, B$ r# c9 T8 @& p            // 为了使setTimteout的尽可能的接近每秒60帧的效果
% t8 m2 g& `( ^7 {$ D6 s: u            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
) `% r# I* ~/ Q9 u7 H1 O                callback(currTime + timeToCall)
            }, timeToCall)
! I2 d! m0 c6 u1 k/ O$ z$ w            lastTime = currTime + timeToCall
. c- @4 r( P/ N5 l0 H3 |- h; u0 t5 C            return id
- X0 ~+ m" }+ a: |3 o7 ?+ \        }
/ }; _. v( ^: g& G3 k4 B8 S
- c* N; I4 l7 o+ k        cancelAnimationFrame = function (id) {
# X( v$ x! P: c  X. _* e            window.clearTimeout(id)
        }
/ w1 m' N; j  e! C0 B8 s    }
1 A( f4 v- |5 v$ K" M/ T4 E7 n}
" c" z+ K& i( e5 i* u
# T+ q4 X, G4 o% T* Yexport { requestAnimationFrame, cancelAnimationFrame }
# q9 ?+ x: O6 S& |
& N2 M* J3 @0 W( z6 d2 p7 f
! E' m* z7 Q3 n, z0 s7 V1 p3 v1
2
) }% U* _' \9 j) u' [3
4
5
6
7
2 y0 e8 r- m9 o7 {1 Z, \5 S3 R/ z8
. m4 P# g" y3 r9
10
11
' S' d) r4 Q% d( n3 @12
13
, M! }7 X! p8 Z0 \' v14
6 a* t3 n. L) \15
# L" `5 w* W. F2 j" Q16
17
- g( u$ |6 k; D( |4 K9 T2 C18
+ F" l# C  s. s* h6 s19
20
21
22
23
24
25
- O6 u. O  H4 g8 Q26
27
28
29
. W* F2 ?& E8 [1 d7 F9 o9 }0 b30
0 G7 i9 I' s9 Y$ v9 Q31
32
33
34
35
" V4 M% U; J% [1 ~! s" k# H% |36
37
4 K4 }# R$ Q3 Z" t0 s38
- L. S1 Q8 p: y- O+ k39
& }4 ?& w$ ?# Q40
* E7 }7 g  A8 w. G41
, k* i8 W' r* X5 l! s6 |: ]42
43
) r3 w8 h! I* ?( h44
9 ?' K9 U) g( C8 i4 }6 x" N45
8 r. Y( @/ K) U  d, O* l3 D9 ?46
47
48
4 w, G$ ~" i4 o2 F& M2 W3 gCountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
5 o4 o4 e% \" d& Y/ R& Z1 g  T1
' e6 {- W  N" |- V0 I0 H/ b  B需要接受的参数：
  v( P+ u: x% e; b5 N/ ~$ j( A4 G
# B& G1 A- e: U+ V, D  U- Zconst props = defineProps({
, z4 }/ H3 D+ ^$ }2 G  start: {
4 A# v# b# w8 m    type: Number,
    required: false,
, h. I- J3 i8 H    default: 0
/ x5 V' G, j# g7 Q  },
  end: {
; O+ Q, X4 i% h( z/ V    type: Number,
    required: false,
8 \9 V3 t' f; b- f0 ~    default: 0
( @- a& E* V! s3 T. |8 h2 J  },
( K% x$ K7 q. S$ ?  duration: {
% {4 l( p+ b1 t( e" d    type: Number,
    required: false,
* v9 d4 q; Q4 O$ k1 A! D    default: 5000
  },
- H. W$ H  l, m  k& P  autoPlay: {
( c7 W; H; ?: @# D2 S. i: P    type: Boolean,
' }; w: I5 c) U3 q1 r    required: false,
) ?" @# l- x: @, P) V2 e( x- v3 k    default: true
3 D* D: ~7 j( z& [: M  x! k  },
  decimals: {
: C0 ?7 t/ M, I; e    type: Number,
- R1 J; m; G: c  V" y    required: false,
3 |0 s0 }+ O" u    default: 0,
    validator (value) {
      return value >= 0
! b$ _# o" Q! ?5 K/ ^    }
7 Q; P1 J, ^: ?( w$ b  },
7 y: d% o. B( e" o, x# O( f  decimal: {
    type: String,
7 L4 ?* I. `( f( ^, X. B4 T    required: false,
    default: '.'
0 J# U! E& r. T6 \( w  },
  separator: {
    type: String,
3 X- _* |, b$ v    required: false,
9 t1 Q5 \+ b& s    default: ','
4 k" P2 U. X, Z" T. S  },
1 M5 Y9 _- l( q- ~& }4 @  prefix: {
    type: String,
% M! q( ^. `8 X" I7 }4 [    required: false,
    default: ''
  },
3 ]' E5 U$ O: X  suffix: {
    type: String,
    required: false,
( ^2 q6 O! \7 M" S; X, I    default: ''
  },
! O" h& h" K0 a& e( u6 F  useEasing: {
    type: Boolean,
/ A. V, w* W5 k. P. P    required: false,
/ l* I1 Y7 s% a    default: true
  },
  easingFn: {
    type: Function,
    default(t, b, c, d) {
2 o5 S: K# I% y. X7 J      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
, m2 r7 a2 N. r% k  }
})

7 R3 h+ d1 P- A
4 e2 K7 A/ [1 [9 V) e6 h1
% l+ d4 J' V+ }& V3 R2
3
3 W! Y/ N* m( N( v+ A+ r! |/ ?7 f( t4
8 @2 ^& C6 A! M' n5
7 m' S# J- S+ Q! `# u6
7
8
+ p- ]& E9 S( _: B" S' Z9
% G1 s. j7 r4 Q4 U2 p10
11
9 T. Q  c) H- Y) \12
5 e' x0 r0 b! ]8 |13
  |9 H' M9 G( h4 [7 G14
  j5 X2 l, V% C- D$ D15
16
17
18
19
20
21
) C; @% W* X/ H) g0 V7 K/ d8 D22
23
, n+ r; n9 t6 o/ A# l5 k24
2 I: S: C4 q" U1 K" D25
; ?% ]: `3 e6 M/ h26
* l0 C) ?* Y/ V/ j2 e27
28
9 z- @9 k$ y2 g) C29
4 g1 g4 g1 b  x, F: x1 h- ]8 F30
5 @; X" g5 c1 N: d31
32
' |6 P2 Y* _! Q6 @6 y& C, R33
34
35
' u! n8 A1 w4 l# A3 e36
37
38
) f9 ~2 E! p* e) n. d! ~3 \39
8 b& ~( i! v$ \5 G: r& n5 \40
41
% I- S9 B  {1 S& S- v7 w. P42
43
44
; m' c4 }+ Z' V% I; ~  J45
46
" o2 ?) J1 V# o( e- W47
48
1 p. Q0 \# A& c49
50
% ^3 j/ E1 q- A6 E, s. C1 X, p51
* p8 F# J% B; x7 e2 e# ~- v  E! a52
% t9 t' _1 Z7 v7 \) S, `53
54
% W2 Z* T: c2 `- F6 b/ m5 r55
56
57
58
59
) d/ G7 D* d0 i6 l) Z60
61
7 d% ^( |5 j9 Q% p8 E! E5 E1 }6 b62
6 c' `3 X! r' B, m) ^启动数字动效

$ I- v( T, a4 l- ^$ V0 Xconst startCount = () => {
) K2 c5 D0 z* N0 y2 z* c( p9 r  state.localStart = props.start
# z; U, r0 v- a0 i  state.startTime = null
  state.localDuration = props.duration
: t8 p, i) X! n% Z/ {  state.paused = false
* |1 y$ F) C1 O* r  state.rAF = requestAnimationFrame(count)
$ w" _% J% Z$ C}
" E2 B1 f4 ]2 y: a1
8 c( L9 I4 M: ]2
6 c7 p, F+ Y2 O/ j( s1 W1 l3
4
5
6
7
核心函数，对数字进行转动
8 ], H9 }% n( X2 o/ e* M( D
  if (!state.startTime) state.startTime = timestamp
( j7 k1 U+ x, ~9 {* b9 @  state.timestamp = timestamp
0 R1 E# o4 q/ W! _0 o  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
" D( M% N( P) s8 a$ f  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
4 q/ {- t' \7 X) Q9 t4 c' P- C0 }; s      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
& t! w, h- @. c' ~* `" {2 O  } else {
' x. Q  Z) X# b    if (stopCount.value) {
" V$ r( K$ Z3 O( b( H0 F, @4 `      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
  d% U1 a# ]/ i, P, j- I  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
1 t+ f2 D/ d: j6 P
4 l% `% y* s. k( I# n( j  state.displayValue = formatNumber(state.printVal)
( V7 E  z7 N2 x( ~% e' n  if (progress < state.localDuration) {
9 M, i9 u1 s+ ^3 @    state.rAF = requestAnimationFrame(count)
  } else {
! A/ c1 G9 |( j' S5 N    emits('callback')
9 P9 F6 F" N% N+ |( L: `  }
}
9 A3 o9 I) w) C+ M4 v4 b
) o# N. a$ x! o3 P
// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
, k0 @( ]+ m0 h* F  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
  let x1 = x[0]
. ?$ V, {1 Y$ _  const x2 = x.length > 1 ? props.decimal + x[1] : ''
+ b8 F, T+ z1 e4 T/ \; B  const rgx = /(\d+)(\d{3})/
! f" X$ o% B8 ?3 X5 B* g% C, \  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
6 B, `6 u1 Y. l      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
; k9 G" D3 b- D# G    }
  }
  return props.prefix + x1 + x2 + props.suffix
7 v& }2 u& L& L  _% ]}
% \* J+ {  z* M
1
2
9 |! x6 K& ]0 u4 `# V& j3
6 o( J$ K% z- j) v) q3 ~. F4
: y7 e* J% i5 ]  \5
6
7
8
; H. L$ w  a6 Q# x* A6 y9
& Z' f9 n1 c. `, s6 Y10
11
- W4 s; s- o. a) x" Y( ^12
13
- A, @- p/ H+ P14
15
* e! [+ [4 f5 d- m16
2 p4 |3 A: J, U$ V# ~9 z; F17
18
19
20
21
22
* P; o7 ]) y/ Z" Q7 V( @23
24
25
7 T* l! \7 O. v1 E8 B0 M3 _; r26
) g, M  ?# {  G( D0 c( t27
9 V$ J, X- z6 A# {/ u9 C1 T/ c* A% Q* ?28
29
30
31
6 c/ x5 H8 R4 k) m0 h32
33
2 z: F0 L& u) ]; V34
1 w7 @* ~1 o  `2 f35
" I, T# X, W9 Q" F6 h" D9 p36
4 T" N: K$ O: w9 w, D( \37
/ {1 Q  t( m. V! f38
& S" d' a+ l( \( \" D39
40
41
. O, x1 C3 {5 {42
43
: _- @6 u- }2 X$ o* {; [44
45
7 p, `% m$ T. W6 r, t46
47
48
, H# A* H9 ]" t- I取消动效
( [, L" t: z" a$ R
4 w5 a9 S/ u! |% c4 P" O; ?8 i// 组件销毁时取消动画
5 }; @7 j  b# s, a; j3 aonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
) E8 L; y0 a- s& \2 U1
0 d$ G/ I( t- V# N0 a, ?$ _+ }: ]. O2
$ c# _$ x- G9 p$ {" A) i3
! {) x& e9 u! n5 [% ^/ b. o6 h4
完整代码
2 ?% Z' n- N/ a' H2 {9 [
<template>
) c1 R) i! p2 Z% \, d  k" j  {{ state.displayValue }}
$ k6 m4 E: h, M* |7 u+ J</template>

3 Y( a6 I: S; x3 \$ A* y$ e<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
, S# w* c9 u. h0 m3 h3 H  Zimport { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
, P6 ~. H$ Y& limport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
& q$ W+ F' B8 y4 d: s$ n// 定义父组件传递的参数
6 D3 B! v( Y% D8 j* g7 cconst props = defineProps({
: {7 c) \6 e3 t; S7 n( g' O  start: {
4 p% y+ t3 x. m$ C0 B    type: Number,
' X: Y: K+ C) F    required: false,
( F0 L5 t6 ?" v5 V" `# ~    default: 0
  },
! Y0 _- j: `  a, E* |  end: {
  P6 h) z- V+ v/ Q0 u6 F" ?* {) E    type: Number,
5 j  `) Q2 i2 Q( G! ~    required: false,
    default: 0
  },
  duration: {
    type: Number,
( ?2 g8 C$ Z+ V3 L3 O    required: false,
    default: 5000
  },
2 I! j* j: ~; M% i# [  autoPlay: {
    type: Boolean,
1 B' F; w2 \7 |6 r, D! y    required: false,
    default: true
" U/ ]1 u: u1 U  },
* U4 G0 x2 }- y/ j5 U  decimals: {
    type: Number,
    required: false,
& J6 e8 e. V7 x2 A    default: 0,
4 E( L3 S# f% t  O1 \) f    validator (value) {
2 d$ Y0 K) u; k4 k# C* g      return value >= 0
    }
/ x8 [( O0 A6 i  U+ ]. L2 @( G  },
  decimal: {
    type: String,
    required: false,
+ z3 n$ y1 o7 U' O+ S( Z0 D( h    default: '.'
1 }$ g, v; s. i6 G8 u. W; W  },
  separator: {
0 \% L1 m- i  m  U6 \    type: String,
    required: false,
( f+ o* C  ^* g! p    default: ','
  },
  prefix: {
    type: String,
    required: false,
4 {1 e9 _; z2 n0 V2 c% ^    default: ''
2 G) |. ~1 l$ P  }% c  },
  suffix: {
    type: String,
3 m% N) E% ?. z; l0 R: R    required: false,
    default: ''
  },
  useEasing: {
6 ^9 K+ r. j! L; D& Q5 E    type: Boolean,
3 ]# s" I) b8 [* s    required: false,
    default: true
  },
& [5 ^7 i" A& L  y! ]% K8 F" _1 R  easingFn: {
    type: Function,
" {' }6 ?3 O) F* B% {    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
})
7 \+ X+ e0 g9 b  W4 U
$ p0 k9 T: J  M; k; |const isNumber = (val) => {
" U2 H* ^/ |3 d8 s: m  i  return !isNaN(parseFloat(val))
" J) H" Y' K  @1 Z% R! o8 u# Z}

6 U2 z( J# ]4 S: s// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
6 m6 {8 r- [5 B: F1 D  val = val.toFixed(props.default)
4 T$ c. o5 g6 r9 F" b# w  val += ''
  const x = val.split('.')
- c' O( b  H. b  `  let x1 = x[0]
9 [( l5 L$ b( V) Q$ Q8 K/ ]  const x2 = x.length > 1 ? props.decimal + x[1] : ''
/ Z$ g( H6 {$ r/ G4 t, I  const rgx = /(\d+)(\d{3})/
1 d: G. u9 X: r. C' }+ M( B  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
; ~" X: @/ M4 j      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
! E" a1 O9 o' O9 K8 o    }
  }
& w9 p! l( K" f9 n3 n. D& I7 n/ U. y  return props.prefix + x1 + x2 + props.suffix
}
/ S: ?7 R" K! a9 G8 I* P
, ~. _6 D" G- M, ^* t/ N// 相当于vue2中的data中所定义的变量部分
! d4 b6 y' Y+ n  X" B5 e% @const state = reactive({
  localStart: props.start,
. \% M& T( j; d  displayValue: formatNumber(props.start),
6 P% M2 M9 p! q7 R  printVal: null,
7 W. Y" }* F, J$ \. g# E7 A; O  paused: false,
+ N4 F+ D" R# m8 ?" e8 ?* Q" F0 G; g; g  localDuration: props.duration,
* Z% e% j8 S5 a" i! r. H! H  startTime: null,
( A3 `6 G' M2 W  timestamp: null,
  N) E! i3 s7 x. i1 ^  remaining: null,
8 U( w7 `% i2 g- n7 d) ^/ I  rAF: null
5 @8 x3 M  O. f& W4 l})

/ G$ w. y) U! }: P3 a+ @// 定义一个计算属性，当开始数字大于结束数字时返回true
& l" t9 c7 x3 Y7 [4 }& x) U5 Kconst stopCount = computed(() => {
0 O9 w9 T4 I3 B  return props.start > props.end
* w& }- |) s2 X$ Z0 o& ?})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
& \2 h+ v# @% D( j% M5 H& zconst emits = defineEmits(['onMountedcallback', 'callback'])
  S' _% h' Y( c% L/ J2 I4 J
+ s5 w3 {3 e9 Nconst startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  x4 n% @- U# H1 }$ Q' f& H; w  state.rAF = requestAnimationFrame(count)
6 `/ e* x; L" O0 v. F+ G6 `: H}
9 r6 C4 O5 m2 V+ Y4 i
watch(() => props.start, () => {
  if (props.autoPlay) {
    startCount()
  }
})

6 W. d" r; f  @% w7 swatch(() => props.end, () => {
  if (props.autoPlay) {
/ H$ Z3 R/ V! j$ [    startCount()
  }
. u+ n4 J' U2 [' z) d! I! y, u})
// dom挂在完成后执行一些操作
' n1 I8 k8 c, j/ A) M6 r8 IonMounted(() => {
$ j+ K# u, K* q  if (props.autoPlay) {
5 ^/ ?/ q. U. z9 T    startCount()
  }
  emits('onMountedcallback')
( O$ k0 m) C0 Y! [3 E6 k1 V% T})
// 暂停计数
const pause = () => {
  cancelAnimationFrame(state.rAF)
" P1 n! _, }4 d3 ^8 H+ X}
9 b2 {1 T4 o% X3 _4 h+ s* }// 恢复计数
: d1 u; I8 B- }1 V9 nconst resume = () => {
  state.startTime = null
" f7 U0 [& T" q* M9 |3 F  state.localDuration = +state.remaining
6 y$ I* D+ T) |6 m& m7 }5 |* b7 n3 B  state.localStart = +state.printVal
- z+ X+ g. i0 U  K9 ]" j/ S4 ?  requestAnimationFrame(count)
: i/ @2 x+ h% ]1 ^$ k}

const pauseResume = () => {
  if (state.paused) {
, D3 x/ @* L6 o    resume()
* [! n$ x) V; q  w    state.paused = false
% h+ |6 o" L9 T( i) P$ L: ]  } else {
    pause()
2 N' i2 M  f. @. U    state.paused = true
  }
}

const reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
1 @/ V. W! u' c/ c- h: H  state.displayValue = formatNumber(props.start)
' f+ x6 K9 Q$ x2 [/ Y( d- X}

const count = (timestamp) => {
0 o8 K: c' x5 d+ K2 V  K! K; {, e  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
; ~& |9 r& @4 o# x/ c3 @5 {6 m  f  const progress = timestamp - state.startTime
. c: i: I& K. @' ^) s& F5 G$ U" ?  state.remaining = state.localDuration - progress
3 X: w6 d& W( {  // 是否使用速度变化曲线
4 ^( p5 k* t0 Y2 `& p, H  if (props.useEasing) {
' z: u( t1 f9 D2 \    if (stopCount.value) {
4 s' o0 _1 H* Y1 j9 G: H      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
3 r5 J9 j7 R8 |4 t! G    }
/ f' W, B& `- {9 [$ y7 k& i  } else {
    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
6 d# M! ]2 U7 X: |; k    }
  }
( f- n5 A/ g; F+ a* s! ^  if (stopCount.value) {
# O; u3 ]; y8 V9 Z+ n    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
- o9 B4 y( p- M; @$ @7 Q    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
  }
: b" {+ x- F9 y( }7 s}
. z4 x( s% V' a5 M0 T" E// 组件销毁时取消动画
/ l* \# O, U6 j: yonUnmounted(() => {
/ C1 R. }3 {, ^3 c' L* i& _  cancelAnimationFrame(state.rAF)
+ _# h7 ^* d4 [# r})
</script>
6 H- b/ Y! q: X+ K4 \. M
1
- ]" s" z9 V$ m) W2
3
4
5
6
& L" x' ~6 p, f& p) [) P7
8
# L8 t: l7 v3 h9
5 t8 p8 c% b" o' }& I10
- P- m% G$ Z) z, M! y' y7 O11
7 {4 u) {) [  r  E. O, ]# h12
* |$ ^! H0 V/ m13
14
, S6 Z  G& ~% B* x( K% m1 f3 a15
16
* L& ]/ k  [3 r  p6 F17
! f8 W+ p, U# z% `0 f, Y18
8 }% v+ D6 u( c2 V19
9 A1 W: O8 E6 O$ [4 P  q20
21
) A: A8 m' V3 ?+ h7 t; i& G22
  L, b: l( l) @: H23
2 ]( J" A$ q% t24
) V3 g* ~) q4 j! ?! |/ Y25
26
27
28
) `, k9 {+ E+ y5 H29
+ Q3 c+ v  @% Z* j30
9 `  p; I5 ^: l) \31
32
* b5 j2 M4 y& B1 ]+ S! |33
34
35
, Z) Q. @3 V# U5 G& n1 q! [0 H) z' \36
1 u8 o. l- a* K37
) L/ N" A' l1 n; \38
39
+ K* S& F# v* k6 J" [. v8 M40
41
42
5 Y- V2 [9 j; L& T43
44
45
46
47
48
49
50
- ?, t7 k+ B) A, v6 P51
52
53
; q& [3 g! r% ~- ]0 P: C54
55
56
3 o5 U  d. u: ~6 P57
9 u7 k* K& C* R! V+ Y1 O/ D* t58
59
60
61
3 k- s( F( ~2 x; E3 Q- V" \62
! i1 {8 T# k( j' P8 Y* _3 n1 S63
' B$ ]2 c( k$ ]64
+ i& ^1 q) x" D) J. P- I( @65
66
67
$ c" `9 F+ P' c1 W' V4 u68
" N6 M' o/ _; K/ p) c69
5 x" Z2 A9 D, ~* A, j) P; ]; w70
3 g2 M& e' ^# R" X. ?" B71
8 A- i7 u1 o! s5 z+ y; K5 i7 j72
3 h! ~7 }1 J- A9 }1 i# ~9 b5 l3 j& a  j73
( u2 F# O# h( b4 }74
& V4 }1 Z: ]8 C- k. |4 v! N75
76
3 E! g4 |& ^) S- m77
, q0 ^- n! O7 i6 A; f/ U' r8 x78
/ ?! m, t- _- z) y8 I; V) Q5 X- H79
80
81
82
* z6 z' L& j" o, c! p  E; j83
84
85
; c" }. M) H3 R) o, Z86
8 T1 |) W) x- V; J8 w87
5 }6 f3 [7 k0 N4 ^( ~4 H& W" m88
89
, Q1 |7 A3 w- m. l& [+ Q2 I0 _" Q90
( `+ H  Q4 [0 i4 {$ F* l91
92
93
94
) N) \$ C$ _. ]; q% u- |95
3 ~( g6 R& S$ r1 B9 G9 ?96
97
1 C: K" `4 B9 f9 ~, |* d98
99
100
101
102
$ Z% B0 c- P' {( M# m9 P' ^" T; B103
104
8 q( B" ?" F# D# w  x3 [105
106
) n! T9 E. \6 a( q5 n107
0 H  V/ q5 ]. C0 l& l. V108
109
110
: D% G' t+ t: F- g0 t5 y111
112
113
# N0 T; P# j# O# q) r% I114
) d$ R' B% j  v115
116
. `6 F& Y+ }1 n9 E" r. S117
1 c# j( U- Z" _8 p0 g$ `118
119
/ g5 {# D; I- b120
121
& p! N  S. s' `5 T122
123
+ ?% y7 Q, J4 f, i: V1 R7 u124
125
7 K, y0 y9 K. {" `- F126
127
128
129
& y6 ?; `7 f* P8 k130
131
132
133
134
135
2 y! G2 r* T0 M& P$ D136
: M6 e4 J' o- `5 C% n137
1 e! i9 T, U. r0 F1 T- L  O+ I138
1 L) [! B5 j) e+ b- c139
5 x! n. f+ [* K% x- s$ u9 Y140
% t+ J5 q8 q( m/ @( }141
142
143
+ P- j; `  M# C; F144
145
146
147
8 J' c/ h2 U9 ^" E' q148
149
$ w! \  a8 D) k, e4 @/ `) L150
5 a# Q( ^' H8 E" ?, o( ~1 D151
  S: I/ E0 G2 |4 D152
+ j3 H6 C* }" t. l153
154
155
+ k# ]2 g# ?0 e: w) \( d. U156
/ b1 H# ?( P/ [) Q2 D157
158
159
160
7 J# ^, N, ?: b- C6 e161
162
, O& k. b* J- s5 b163
164
165
166
167
. s* d+ {& N9 }$ x1 c5 p9 }$ L$ p& {2 G168
169
170
6 \( }( H, [9 O9 R5 K4 N, ^; o171
172
% U/ \# o) K$ y7 F173
174
/ a$ Y: a! R. c/ W% s/ ?8 O$ \$ s) Q175
176
( E! n! A# I% Q177
178
$ `' F- s- I$ i3 z179
  v( {; ^3 g! K180
6 q* e: }* L# Q181
182
4 Z# \- |* v0 v2 |183
184
4 d6 j1 l" G  Z4 ~: N& R185
( U! Z# R/ r# J, f' y' o% j186
9 y& ?0 q: l' \4 ^( K" }187
188
' m+ X0 P3 J' p# J+ x. f" z- Q0 A# n189
; ~) q4 m! \, H190
191
0 Q6 x0 t7 q- {8 ~* Q192
2 {3 s. }, W2 h# ^( n; h193
194
% w. K7 K" J/ _3 T) Z* ]# n195
196
197
- U/ B* ^8 S. p3 S7 E9 t7 {198
199
200
  ?: C0 P7 u2 o7 N0 m( v' ^2 C7 v3 p201
202
总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

. ?$ p% ]* e5 Q4 o& V% E- }demo演示
: g: B! B* a. a- @后续的线上demo演示会放在
demo演示
完整代码会放在
个人主页

6 a: b% d4 Z4 M$ }7 [  u5 P: A: U' m. l8 J希望对vue开发者有所帮助~
  z2 R6 G2 L& x; i' A+ Y1 E/ O6 d3 `( E
个人简介：承吾
9 G6 y% e! U% I# C+ J工作年限：5年前端
地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！


' A/ N. `; R) m; w+ E* J+ P

1 W7 `0 e/ [. c————————————————
: ]6 r9 T6 N' N  j' m版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
0 b4 R& i0 P' v# Z' _9 F3 X原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847