数学建模社区-数学中国
标题:
vue3 | 数据可视化实现数字滚动特效
[打印本页]
作者:
杨利霞
时间:
2022-9-14 17:02
标题:
vue3 | 数据可视化实现数字滚动特效
vue3 | 数据可视化实现数字滚动特效
# @# T4 B( N C# k m2 B2 R* K' P
- \# M6 K/ ]9 k$ ~
前言
7 {( M4 f) \; y6 E% H$ H( D' {
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
5 i4 u# e2 n# G& p; O
TypeError: Cannot read properties of undefined (reading '_c')
! N- V; i4 _% q* G; f" \, a
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
& u+ o# {' \6 ]! P" j
+ b! c6 h$ }" W2 V
4 ?2 z- W$ G3 Z7 b" n1 S
思路
( h) h7 j G# h. ~9 V. C# l. H
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
1 q3 L3 i' y4 l4 N
7 _( O$ A- U6 D* P) m
文件目录
: s7 u9 C8 E! y; R! p2 h$ g' ?
+ b) r1 g3 {& e9 H/ i* R
: d o0 c6 o3 G6 D
使用示例
7 q) m7 G: P8 w4 R% B, X
<CountTo
( u n% w2 W# [
:start="0" // 从数字多少开始
( }% Y% A1 ?. [) u' X( s
:end="endCount" // 到数字多少结束
, I# H8 R0 z3 h% F/ g
:autoPlay="true" // 自动播放
# T, E, r4 o1 [7 t5 o
:duration="3000" // 过渡时间
8 Z8 L0 T- R8 U; a% b4 a( v; {% t
prefix="￥" // 前缀符号
: k. Q o. a# u
suffix="rmb" // 后缀符号
$ I: @6 X: y, X+ W! ~1 w
/>
( P+ k8 f( y3 Z
1
! c9 ^+ Q9 t: w' U3 g( M' N
2
1 d4 _6 o% K: ?7 t" q( l
3
5 A* S7 z7 U; P! c; y2 O( T: U' Y
4
! N0 t" A$ Y7 [& k* _
5
! H. G F I! K7 U! d9 r" I
6
; }7 f$ N/ b4 {/ L$ N6 |) A
7
4 p1 a/ j- G; K8 ~+ ?
8
1 Z/ l, Z$ Y c; k4 B2 o, b
入口文件index.js
, q& s( z' Z# W. o1 f" d7 ^
" t6 m: U- o2 r
const UILib = {
% D$ b( H( K: Y' ]
install(Vue) {
~! Z& V0 c% e, \* c. n' H" s
Vue.component('CountTo', CountTo)
2 W2 {) Q( l3 A1 \( |
}
% k- M3 T. h4 V# J0 D3 C7 b# v
}
1 c D& r) ~" w% `) U$ \9 S
" D7 _* `" P6 y/ j7 N w
export default UILib
6 I( r6 h- N5 w3 W y' R5 }7 V
% _8 _0 E6 ~) Z! I
1
* r0 ~1 a) ~5 J9 y w
2
9 R7 g- {& |9 D5 s2 P j& ^
3
& E P2 e" \1 Q" b
4
7 h; a4 p! k* M. f
5
/ C' O6 r" i4 {( S8 y) _
6
; [& E g/ v" I# H# W5 [- I; d
7
9 v" }$ B, m6 w3 e0 D; Q& y! D
8
8 E( ~% Z' v0 ]) _
9
% D" e- a: X" h
main.js使用
4 [* \, F( F4 u# I, _5 j
import CountTo from './components/count-to/index';
$ j4 P! P; b! ~* Z- g
app.use(CountTo)
9 I) N: C3 f' Y% N9 ?1 g+ M
1
! I! i4 u, D! T6 s8 }
2
' K6 [8 K/ S0 [& T, Y, k0 y4 f
requestAnimationFrame.js思路
' q- |" U9 G7 C3 }) a1 ?4 J
先判断是不是浏览器还是其他环境
5 b7 k/ O" k$ J8 x, X
如果是浏览器判断浏览器内核类型
/ Y, N7 G& Y% q# q G
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
+ O. `- q: y6 h( z+ _/ Y
导出两个方法 requestAnimationFrame, cancelAnimationFrame
0 D% h! E4 P7 t0 Q4 l* w1 }1 g3 }$ n
各个浏览器前缀：let prefixes = 'webkit moz ms o';
! [2 W5 U. E! ]" w' f8 J: C) N6 ?0 v
判断是不是浏览器：let isServe = typeof window == 'undefined';
4 q) k5 `3 X1 `: {1 X$ c
增加各个浏览器前缀：
$ V0 f) N/ }* G9 ]* j
let prefix;
1 u, ]2 Q4 O: ^" ^3 M# s/ W, n
let requestAnimationFrame;
1 Z0 Y+ z" E% l$ f; E1 H [ z
let cancelAnimationFrame;
0 l; ~6 C5 I# {5 m& g
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
2 }% M( x0 x v- {6 l% _: ^$ ^- f
for (let i = 0; i < prefixes.length; i++) {
c7 _) C; h* d2 h4 ]
if (requestAnimationFrame && cancelAnimationFrame) { break }
$ K! W i) J* h0 l5 y2 g
prefix = prefixes
" M8 S, |! ~% s
requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
5 W1 m8 M8 r b6 s9 Z, f9 O( ?
cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
; }" _* T' [' B9 |
}
8 ^, K: p' Y: T1 o- i0 ]$ p7 V
" Z5 @8 y, `! L7 O R
//不支持使用setTimeout方式替换：模拟60帧的效果
' U4 B( R* [: e5 G1 {9 K \* \, R
// 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
. W8 g0 L) a+ C# M$ T$ Z k
if (!requestAnimationFrame || !cancelAnimationFrame) {
$ P5 ]; s- X" Z
requestAnimationFrame = function (callback) {
. ^* e4 m, l0 V: Y' z$ P9 v% ^4 ]
const currTime = new Date().getTime()
) } W8 W" C& ^+ T, `
// 为了使setTimteout的尽可能的接近每秒60帧的效果
' J8 q/ F: r+ S ~; N6 X5 H2 h: D
const timeToCall = Math.max(0, 16 - (currTime - lastTime))
: a: M% S& I. Y& b& m+ `
const id = window.setTimeout(() => {
% @: O- L4 K5 M/ k- c' h
callback(currTime + timeToCall)
3 m3 H. H( l& l
}, timeToCall)
, c2 g3 c/ o( v" a! m4 c
lastTime = currTime + timeToCall
1 ` \9 h5 c2 ^0 f1 y$ ]7 r
return id
1 p2 M" H# h* Z+ X8 d9 V7 a+ {! Y
}
3 h+ b$ T+ H6 p& C( @
2 O2 I5 ~4 `2 c( `+ n, P9 I
cancelAnimationFrame = function (id) {
" s' k ` g/ q/ a) C1 B3 Y
window.clearTimeout(id)
7 H" N+ J0 P; ~1 R( [
}
# t. u& D9 w9 q* u' p
}
( a/ F( ~" ~4 Q/ l) Q( \* R
$ H( a8 P' d8 \. n# l
1
. W1 t i6 q6 C& I* l# h0 O
2
7 X6 x0 f) x/ G* J
3
9 i0 u' s( a7 q9 [- \4 Q4 o
4
1 ^2 X* H* V: b l$ k) x" k
5
( S, t1 v% z2 q* m; m
6
7 N# J. }& f6 S6 Q9 @
7
0 l2 S- C7 w) N
8
6 B: ?0 n) c$ h7 E; u Z
9
+ V$ j' m- r' B. K W( K
10
2 b/ L1 P; K5 g/ [
11
, N2 R+ N7 n) F! Z' B5 s
12
5 G8 d3 J3 F7 p$ [) Q
13
2 o1 o& W1 ]) M6 C" }
14
7 j1 i- @6 |% ~& u$ t
15
1 ~! @4 z1 L( z+ b4 [5 j
16
1 s! d8 u8 t) J3 D. J3 d
17
% u9 s3 x) g3 `4 V3 `5 T0 y- E
18
# R: b, }4 t; i H
19
! M3 L( ?& Z4 G- Q
20
' D# K1 G" M. I5 ~
21
1 _% n8 i1 E! G4 I9 B
22
! t: h3 A0 q i! x
23
1 I. E S( o" w
24
3 I- m# r/ X" X
25
! E& b3 U3 x+ F/ w' c) \1 w& E
26
# w6 w2 d& w$ @; N" J# U5 Q4 ^
27
2 ^0 A6 E4 |9 m& T, c6 V3 V& Q( W
28
% t, E8 o$ W7 x. A- Q
29
: K0 s7 @; K2 [6 m7 t& U
30
) s0 t& `% b' g; B2 ~% ^1 \
31
; e) k% } u9 F& F, Z0 }5 l
32
" T* B% @3 ~! N
完整代码：
$ Z0 b* M" O* D% ^5 X
requestAnimationFrame.js
2 b- p6 q6 E1 }/ g
: V* s3 n0 u; C8 J# z6 N6 B
let lastTime = 0
1 P7 V; T* k, a, d
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
$ t H9 ~$ k2 U. U
, L# v b7 r9 g$ n4 ]
let requestAnimationFrame
7 C! Z/ e4 p, b) }* I
let cancelAnimationFrame
; U, e% \. ]" j K! E* Y( z
0 G' X, w4 s- v2 k& Q _" a, o; u
// 判断是否是服务器环境
" H1 _; C) d8 l3 c) k/ u
const isServer = typeof window === 'undefined'
; ?, w- S+ ^) V- ^, D% Z7 O
if (isServer) {
& g3 [ }6 W( _% K4 j& n1 y
requestAnimationFrame = function () {
7 N0 T9 n7 L8 O' A. L7 k
return
/ s# D* k9 F# M2 {
}
' r4 t: n2 n( M. n L4 G0 U
cancelAnimationFrame = function () {
2 ~" `" m0 ]8 E
return
" o" E; Q- g, q" g, d9 p
}
; A1 L6 }* J8 @; R! h ~6 L- Y* X9 q
} else {
8 h) i8 `0 {% k, C" Y* E
requestAnimationFrame = window.requestAnimationFrame
2 a2 x+ x) g, m3 c( ^9 @
cancelAnimationFrame = window.cancelAnimationFrame
8 H' v' M( C0 L1 q3 ^ t- W5 w
let prefix
# M7 s. c9 n/ q
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
6 H, s% n3 [5 Z4 q! @% P
for (let i = 0; i < prefixes.length; i++) {
f4 E5 J" d7 z0 ~5 h6 d3 W0 o, S
if (requestAnimationFrame && cancelAnimationFrame) { break }
0 T* a% @3 q& s) s
prefix = prefixes
7 s9 l( r4 K0 u/ ?. V: Z" G
requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
8 Y( ^) W3 k( b0 Q7 O
cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
( s, E6 Q8 H4 s- ?
}
; y; ^6 w" Z& j7 {/ F
/ g7 s3 D. E M+ G1 O
// 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
7 R9 V ^3 W$ L7 p7 E! W
if (!requestAnimationFrame || !cancelAnimationFrame) {
* b6 ?" O/ C% E, h7 |
requestAnimationFrame = function (callback) {
5 V% U5 q8 I7 Y. Y" W* W1 b5 ]/ w
const currTime = new Date().getTime()
6 i p5 e1 d4 O/ v* k, C( U
// 为了使setTimteout的尽可能的接近每秒60帧的效果
0 X3 l4 H) E* s+ i4 H
const timeToCall = Math.max(0, 16 - (currTime - lastTime))
# p( G/ \4 v% G5 V7 \8 w( U- ~2 O
const id = window.setTimeout(() => {
+ g+ M# w# \! h0 c* n$ w
callback(currTime + timeToCall)
) s0 ], d n2 E8 T9 G& z# {
}, timeToCall)
' Q v+ O4 p$ @* b: x4 A7 N
lastTime = currTime + timeToCall
* e, o4 k8 Q1 |5 V& [9 r2 S3 t
return id
$ }3 K; [$ k1 Y0 |5 i7 V7 D( e
}
T7 I% C/ b! f9 t' n6 o4 H* F% u
; ]( C$ r. C! K# R6 f! r' h4 V" l2 j# d
cancelAnimationFrame = function (id) {
' k5 D( b5 G7 o( Q+ ]/ ?
window.clearTimeout(id)
3 z. \% H: w! d1 l4 ]) h
}
6 [, b! {4 c; Z
}
. X& a F. y: o; u' F# L
}
& o: ` x: i1 f5 V8 m5 a, c, e) x
, S* M2 N' Q( M; u, J( b: ^
export { requestAnimationFrame, cancelAnimationFrame }
5 I$ M: e( Z% J; h u
$ X8 T# l L6 ]: J
4 X! N1 z$ N' g
1
2 E7 ]0 _7 a) Q5 o& q% \. z
2
4 B5 Z$ n: m6 C- ^
3
7 Q% q1 a3 G! U$ x' t! \
4
: e$ k' m# y ?$ H e
5
D' l* k( v7 n$ i( c; I. Z4 |
6
& C# j/ u X! |
7
8 T: E; @- _4 K7 t$ X9 v$ q( H
8
0 H: M) D+ @2 O$ S& A, Z: i
9
; D9 Q% Y2 L! \9 c4 O
10
9 X5 ?$ y4 e% \1 C L
11
* X% S& W- m7 b# E% y
12
! ?- X+ B h2 M5 g! S$ R s
13
$ n$ _2 w1 J" ^/ {, w
14
7 ]! T2 j/ }+ S
15
; X9 V! j# @, f5 q: J3 J
16
M4 X; J/ s; d. T# Q- u+ j
17
$ B+ q* f# @6 P" L# w! M/ S! a: i- a
18
* w2 Z2 @5 l/ q- ^, G2 P4 F2 z
19
2 C9 Z" P6 ^( o) z) X+ H; c
20
$ x# j+ [. Q) A0 c2 W+ V
21
$ ]; i% B3 |. e0 d5 I t
22
1 H9 w! Z/ K! |% P. t& U
23
. ^, I+ v4 B: ?% H' G( i9 i- Q
24
: m6 u! o- R ^0 ~# o4 M' Z" \
25
: H I3 ^4 M2 g, J# Q
26
/ s) x+ M2 C: T! U& I
27
/ f+ H+ b' F# ^& N3 L+ t6 p/ g
28
' g- } k, z3 u4 b8 m; D& D/ Z
29
, z: N# {7 N. N1 a- a* n t
30
* d. f" G& z7 L% y
31
9 h2 y7 I; `, s8 k% r; p) ~
32
8 N V+ l6 Q& v) x
33
c) J. ^! F+ O$ f
34
( z0 }) H$ r k$ m; |- M
35
4 ?% X/ w9 V; j1 a: U& B4 U
36
9 }) T2 e% t; P4 J9 P
37
( Y( B& ?0 e' \
38
! e: a2 z0 T6 P% T7 N
39
- [. l$ C- p2 A- y: P
40
9 H! G. w3 L D6 F& n
41
9 s9 l2 T9 o. n4 k1 J7 Q5 Y* j
42
* u( r+ F; g8 D
43
) q5 s! @6 L# C! O; h! c( a" w
44
+ c1 v) k& D$ \/ `2 [/ V
45
: p7 T2 u$ E: h: H0 Z
46
" S5 j9 W3 a U: {% P
47
& ?! I' Q3 t# q/ \0 L8 q
48
: H, H1 i* J0 O8 {9 |' f& R1 f: i
CountTo.vue组件思路
6 r9 `2 q r4 V! Y
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
! ?0 I5 V& M* x. [
5 K* d2 A/ h# ^- x o. E' |" A& u
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
- K. s- {& J8 |) ]" |# o0 x
1
" i* {4 W& C1 `. }. Z. Q0 k
需要接受的参数：
. {( ` g9 p( Z% W. J
8 Z, V; g# o" y: |
const props = defineProps({
: F+ r0 e# Y( R8 k& U# G
start: {
. P: A3 _6 I/ s8 Z# q1 y3 U7 _8 n
type: Number,
2 N# ?8 G V$ g9 _ v9 }' _
required: false,
. B5 n, F9 Q8 z9 i
default: 0
3 c5 l% Z! t& ^& t
},
; ^9 u" }% H8 u) f: ~7 Y
end: {
1 H. q' Q: k; @, m1 Q
type: Number,
# M [$ J' \2 X9 f8 n6 x% q. s
required: false,
* A# X$ c9 Z6 J* A+ f0 n
default: 0
9 y; n9 e1 o7 a7 V& c5 i
},
( ]% I1 t3 r$ W5 j
duration: {
/ L7 R( J+ N4 o# r$ j, i
type: Number,
0 `3 B: [6 Z4 F; G( B
required: false,
- ], k( _! V' O& j4 f y+ ^
default: 5000
& x+ d# p+ g8 x6 H& q
},
; K- N2 c y$ [
autoPlay: {
6 ?' e# S* R1 f# F( s, s
type: Boolean,
/ t& `5 k* R, b" l/ ?$ x. a4 G. B
required: false,
; K& R% [2 ^: t7 Y) g
default: true
3 b- h. s) s' b) H% M
},
" H0 ^0 j- N, w; D$ n* R8 q& ^0 m4 Z; o
decimals: {
. p7 d, w# C% X Y5 G
type: Number,
* m# k% C8 G* f- L( M) k6 e* l @
required: false,
7 R$ i4 s/ Q3 {+ b( F6 @& D
default: 0,
) H9 J- e9 F- @
validator (value) {
1 n P5 O; p! h. z: E% F
return value >= 0
Y; u' t2 U) U% ?/ U$ J
}
+ v. y' ]/ x9 \) z! m
},
) {/ ^1 k+ W/ ^ j
decimal: {
4 u5 g5 f- j# z! f
type: String,
6 @+ D4 f& V7 @* k& p( i
required: false,
8 P# h- F. m- ^! w/ M
default: '.'
1 f. m8 W2 M; z+ {& |7 j
},
0 M' {; }8 w" ^; Y* t
separator: {
! O& L* R3 _, a; \& H' u; r! P. Y
type: String,
% B: r ^0 k, \# }+ M5 Z7 d
required: false,
) G- c: r; }0 M7 W
default: ','
w Y2 t# P3 L5 ~4 Y7 d$ n
},
( w7 l( O: ~ A/ c; \% ` g
prefix: {
. b }2 {4 [; b: E& q& P' j; l$ P
type: String,
1 n5 @' j" E6 y* U5 L
required: false,
* E2 G9 W& ]* J& b
default: ''
8 L) P, o U" |' A( O
},
8 @4 n# A/ i9 f _7 `
suffix: {
7 H# t; ?9 M% e; A" e: C4 w+ }8 i
type: String,
* o1 f/ r, K [1 [
required: false,
7 N( G4 \0 X1 `! A) \& k
default: ''
% i; u3 R; \4 x" F
},
4 V) F4 ?* N) ^8 B* X& k$ B8 I# ?/ y
useEasing: {
# x" e; \' C2 t* P. _0 F
type: Boolean,
- M4 u4 `3 F# {/ Y) H+ V2 u
required: false,
6 _# T, U7 k; l9 W( h
default: true
' d1 {( j l" F2 U
},
4 x1 Z. T& g: C7 L7 R
easingFn: {
/ {: o% H) x# I/ @1 F7 Y& I$ _/ T
type: Function,
' d+ n% F, }) @
default(t, b, c, d) {
% I8 v9 R. X: F; h* \7 l# P
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
& q8 E3 ]: q/ j! ~
}
# l8 O3 a9 t T! l% V3 q
}
; ]# Z. }3 R* l: x G4 Y# k0 [
})
+ e0 l# O4 {2 s( O! z2 p
# b8 R9 s. i7 Z+ { f# @) a# j; x3 T. k
1 L5 u5 Z9 X6 |5 t4 @
1
4 H* Z* `2 E- b. F& ^* S. g
2
. L7 f n# H2 \# g( a
3
- A* d: e" |1 P$ z1 n$ _* g
4
- _6 c% m3 L$ j y* `
5
; K& V9 M# f+ H6 m* c, F
6
! k; x' b8 w0 y+ ]$ }- L: W: n) C
7
s6 L. z- d2 i# _2 h1 V: {
8
8 X2 [8 [6 }# D- ^
9
& y6 R8 l; s- C2 I0 a. a6 m; W
10
6 `+ y) Z8 F1 P( [
11
6 Y ?" {% C5 z' G& ~# g
12
1 a# i) f. B2 U8 T
13
/ B# o7 \/ Q9 Q0 q
14
* P0 ]9 a3 _5 X. u1 V4 ^
15
$ E* M. ?/ U! S' O* o/ L# Z
16
{1 |0 T' |! v, S7 S" H$ \
17
: [7 `$ |4 w) j# ^3 L1 U
18
' v6 }) o' |9 V9 [0 _+ n5 w
19
( z3 _" i% u. V! a
20
. D7 B& ]$ _* Z# g6 h Q$ U( D+ [
21
9 p. r, o) R( C7 Q" }% I0 H* G- ]
22
% e9 ]0 {# @. y$ _
23
9 d/ ]4 \/ s6 A0 V7 ^$ v2 ?' H
24
2 d4 i6 u2 w3 }1 z
25
. O, ^/ ~5 }/ q! Y
26
" H5 m7 }) x# d- j8 s
27
+ T; C2 y* t! o% n8 X7 u3 Q& u
28
! H( N6 U% s. s
29
3 Y5 m& {* h$ l3 d8 x4 Q9 a# O) X
30
7 Y4 ^. j9 d8 p" _8 O
31
/ u& W4 @6 G- [. t+ {
32
/ A+ _7 ~3 j( Z* G
33
# q2 L; e. d# t% J |& }
34
5 @7 ~0 h+ z, A9 V$ y a6 T
35
6 F4 ~. D; \: x) M$ B
36
, s5 g. U' X& T2 i4 d
37
5 ^' s+ ]- k/ b( C8 Z4 l# j
38
" H2 u4 Y8 |# g
39
! k: W" h1 {& j
40
+ e8 h$ K5 Q5 M: l) Z1 F l# U+ f7 K
41
+ V# Z! ]: r2 ^
42
& ^* _/ N4 q2 G6 _# D
43
5 p! o! D g {8 T8 U9 y* A
44
: t3 [( U1 \( L6 {
45
6 x- T3 ]6 t- T9 O. H
46
& H7 V% d7 ?5 V1 {
47
2 J2 H6 C$ E2 ~+ S
48
7 t% J# A+ w5 R5 ?# ^$ D1 z5 }) u# n1 J
49
0 L5 B- j. V4 Y
50
* [0 m, ]/ I/ J L8 j b
51
$ O7 L3 e* @9 l3 S* v2 S. X
52
% Z" l* V/ @+ C6 @& G+ b* H
53
4 v) h. w/ Y6 A0 |
54
7 }% F' _$ ^2 X6 V+ [& N+ ^; T& V
55
/ X( J# e2 g9 j. T
56
5 z) ~, H1 s+ u& T& n
57
% u! ^4 A; Q+ V( h& `" F
58
4 N5 a) C9 N5 Y' z/ m
59
3 z6 z1 E# }, L3 {" X
60
' q; T \% @- k5 o' n* G. h! K# X
61
9 ?' p$ k; v7 C# D5 w) b9 @
62
1 [) ^6 A' i3 j9 O* A; \
启动数字动效
& D X" T$ w0 R5 H8 D% \; r1 b
. n% Z, C- g. C" s
const startCount = () => {
! V9 y9 @$ Y1 F: C
state.localStart = props.start
) M7 E+ _: f9 O: _6 G
state.startTime = null
b% Q3 N' S% x* }
state.localDuration = props.duration
; @( J2 R. O% ]" D! B. m2 p
state.paused = false
, j4 c* o9 Y5 n5 O
state.rAF = requestAnimationFrame(count)
: ~& d' [) C$ q) _; f/ R1 {8 M u
}
; L0 U% ?* Q% F. J4 {, X- R6 W
1
4 u; D. O. A8 k4 U- v/ u/ P
2
2 {! ?2 L1 n0 e5 |! a5 x7 b
3
8 _/ Q( I p5 C6 B, i
4
7 ]9 D# o5 k' y$ \; R1 L
5
) Y4 u* `; s6 ~1 c) }
6
" j* B# R ]/ |+ t+ j7 Z4 d! v
7
# I0 X# K1 _7 h( [- H
核心函数，对数字进行转动
1 i7 K2 u3 e, m5 M& T
' Y: n7 d( j" `: O3 [9 }( b
if (!state.startTime) state.startTime = timestamp
9 O, W! F% `; x6 a
state.timestamp = timestamp
( e) F4 J T0 o$ a+ K. W# n) P
const progress = timestamp - state.startTime
% `( B% J- j. L9 O/ ]5 c
state.remaining = state.localDuration - progress
" p: G, h6 p: ?
// 是否使用速度变化曲线
5 t1 ?/ E$ Y: x7 `1 Y) h/ Y3 T6 j8 F l
if (props.useEasing) {
: J6 M5 O3 O2 f7 k5 p# }
if (stopCount.value) {
1 _6 p! C; D0 {2 b& b
state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
0 D2 [& b3 @5 s& t a% Z
} else {
+ r4 `5 R2 b# e$ P
state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
' f' b+ ^) A) {9 k. ]6 p
}
4 S7 ~: i# U) L1 v
} else {
$ q$ C: @6 v9 Y2 @
if (stopCount.value) {
( X# H# @/ S7 a# x* @
state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
' V0 ~) c, J g, w7 H
} else {
9 C' v% \, O: \. `! f: N) U
state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
: U7 i ]5 W* o# K4 j$ j* N+ ~
}
+ Y; h7 C/ k( H8 p
}
9 q) J7 G! g& s% H
if (stopCount.value) {
4 Q2 z' s a( x
state.printVal = state.printVal < props.end ? props.end : state.printVal
' t; }$ e$ f) y+ ?( H; C
} else {
2 f3 C( M7 |" D p" S# [% W. m
state.printVal = state.printVal > props.end ? props.end : state.printVal
- t. G; D, m- X: o+ d2 a
}
3 S8 C; ]7 Z }5 T
5 _6 @5 u* r8 Q7 K
state.displayValue = formatNumber(state.printVal)
! B5 ]5 @% y/ A1 i, M( p, c
if (progress < state.localDuration) {
) S3 J) p4 {; w4 c
state.rAF = requestAnimationFrame(count)
* T* B! G. I- M9 y
} else {
! J" A" Q+ x% w( E
emits('callback')
9 M( \0 s1 W" h! M
}
: g1 P3 M- d5 _, `0 k' t
}
8 M$ `- E! ]! J, D; P$ I; F3 r
- o9 V% S( ]. e5 k1 P, C$ C. r
3 O- t0 Y7 q m8 A+ \0 \* ?' {/ G" w
// 格式化数据，返回想要展示的数据格式
6 K' p w$ r. _' ]+ m; c
const formatNumber = (val) => {
8 l. } P3 b, o0 Z5 F. |
val = val.toFixed(props.default)
/ u0 m" Q) Q- _4 ~" S1 ~5 X
val += ''
- G- e; i' c1 A
const x = val.split('.')
# T7 g$ A3 j) i" J. C5 `. u, m
let x1 = x[0]
( L Q2 y& u) H7 ]
const x2 = x.length > 1 ? props.decimal + x[1] : ''
2 l/ _3 c4 I5 I/ a8 D9 f6 U* q4 ~4 _
const rgx = /(\d+)(\d{3})/
) ]$ `5 k. N( N+ o" E8 ~
if (props.separator && !isNumber(props.separator)) {
% f, |& P( f, \' x4 H
while (rgx.test(x1)) {
5 ?8 ?5 L1 b; r; e: n
x1 = x1.replace(rgx, '$1' + props.separator + '$2')
5 y3 i: `% s* d1 h3 P
}
* _: R* u3 U7 b5 [0 R8 S1 ^2 b
}
" T9 U: q9 q1 `
return props.prefix + x1 + x2 + props.suffix
% ~" @* e* c+ D! F1 n
}
+ R7 J8 N- M5 a1 F, A) s1 @7 y) c7 s; o
6 z0 ~0 K- E, o, F8 r
1
* G+ M# }$ d: u4 E9 ]7 [
2
% m7 c. ~$ E- |
3
; z- d: w6 G& T9 N
4
; m' p9 _, N# i; i/ p9 Q
5
/ ^* Z9 Y- _6 b7 M; E
6
7 g3 t( A7 \" z8 P: N; _ X7 L+ L
7
' c% F- S4 N9 @" l& g
8
& c2 Z5 J; {+ J2 J# X
9
; B: R1 k- r T. H+ b
10
, P$ K2 l; \ i& [
11
0 ]. _4 V. e" u& A
12
1 a* p! D6 Q4 Z8 F) G7 {
13
, M/ o6 I {% B, c2 ?
14
8 N9 \ L8 z: n) @) C- N0 ?
15
4 q: P4 z: {. _; m$ F3 ]
16
- h: D& C! U6 ]0 `# V" w( ~6 o4 C+ @
17
% x t6 u$ D( ?4 _5 E
18
1 n5 }$ l! _- [
19
2 q7 F) q' E; l4 n
20
# d: S3 w6 w7 B f
21
2 T4 j N$ R6 ^' d! v' ^
22
; E/ R. D/ s& i `. t$ |
23
* L9 h# B$ q+ u3 C1 v1 `& P
24
1 {/ C6 I8 p6 k; l$ P( p" _' g
25
, r" y4 V T c6 E
26
3 n3 h9 V) N" d1 X- J* W* W! d
27
% s# l! L: r: y' ?' \+ r: B) y- M
28
" y* _; v6 X G ^" o+ z
29
- n" V( O0 U0 N3 l7 [' L
30
- p: t4 N+ r$ O. p% A+ I/ b
31
. d# L7 X1 ]! f4 E
32
8 d4 Y8 K& M- b/ m$ D1 [& P2 X5 j# D8 [
33
7 D) O: G4 e' A* Y7 `" M* a& L X
34
1 i' u* i/ E% g7 ^
35
; V3 X' `) c7 u& \! [
36
4 ]/ G$ F6 d: P+ |0 a( f
37
5 z2 s( U" W% x# R6 w
38
1 n: _/ E) e$ U+ R) p
39
]! ^1 e8 y$ X5 c/ ~
40
. k8 Z f1 C- t. g/ L8 W
41
" @' @* y: |' _; b5 Y
42
9 H& B7 c( Y7 D- K6 C) s/ V
43
* y$ Y% l+ C" R6 _* ~- M7 ^! Q# x
44
* C5 U2 n- d7 [3 Y8 |; S
45
0 ?6 t5 V9 y2 z
46
- b$ L0 u" g) j
47
0 B1 E. G4 D0 w! J3 Z
48
* x5 {7 [. X* H% t! O$ l
取消动效
# Y" ~( X6 V# Y0 G
% e1 i( A4 p. H1 Z. G+ [
// 组件销毁时取消动画
; L, f! r o- v6 u5 R
onUnmounted(() => {
7 i" z) P d, ]" F# o. i9 |* Y
cancelAnimationFrame(state.rAF)
9 \! C) j# {7 I" T$ Q
})
+ ^% f) \2 h: e g1 L+ j& t g
1
# y9 r: z9 o9 Q( C) c- h$ r
2
$ O+ g3 o3 p _$ ?
3
0 O/ R, h1 G% T/ s W
4
1 |4 O7 L' A/ e1 B
完整代码
5 L* X) F5 H7 m) j
, s% n" ?1 V) l9 h, W' d# | F
<template>
# k3 d5 }* ]( u s4 U
{{ state.displayValue }}
" ]8 T$ Q8 ~8 x6 O; k- k9 P* Y
</template>
P& x* Q% c0 N3 `1 p
3 }7 Q: V- |' f: R; ]
<script setup> // vue3.2新的语法糖, 编写代码更加简洁高效
+ Q' G% U$ p- I! g! z- k+ r1 f
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
, ^, q) h1 e- Z& D& p
import { watch, computed } from 'vue';
1 u3 ]5 ], e6 W/ Y3 Z* _
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
R1 o l. Q% X5 k
// 定义父组件传递的参数
. [0 a. u; g. n5 P- p- _9 l. {; {
const props = defineProps({
% ^) g% d* S7 R5 S$ S
start: {
/ `$ ?1 b* r! G: \8 ~: _
type: Number,
$ z6 ]3 E" Q5 N' u
required: false,
! S. I, m' Y# ]- l& {
default: 0
: q! M/ w+ ?/ H( ?
},
- D* @& q) F+ i' e) J [
end: {
& X: t2 J0 c a3 { v4 n1 U( I
type: Number,
2 w# N8 h. A4 _7 n* L
required: false,
/ M H: z) K, r, ]
default: 0
! ~ x6 J, ^& A, c
},
" d/ l( V- o/ P- a% Y6 t) R" x
duration: {
5 K6 s! V+ O9 A% e: ]9 N3 V
type: Number,
, @" g5 F5 g" F) a/ R+ B! g* R8 B
required: false,
7 C4 |, [% I) U
default: 5000
9 ` K8 w, z* g& S) ?4 i* R
},
* J/ k5 U* A0 |; r1 N3 ~7 W3 k0 Z
autoPlay: {
( Z& D4 u$ ~ I
type: Boolean,
1 y3 i/ ^# ?5 x& i0 f# p! g
required: false,
; l' ] [0 W; P
default: true
5 ?' T, m& i: I. N
},
$ Y$ p& k, W: h% X$ B$ p& @
decimals: {
C$ Y' ~& P: M$ P7 q2 F
type: Number,
0 V( ]( N. T: Z9 P/ R, G3 T, w: Q/ k
required: false,
: V# V# E k% {8 F
default: 0,
6 a3 j, x4 Z- ]1 E6 N. B8 w
validator (value) {
5 n7 P+ `/ k& S6 z
return value >= 0
9 Y+ L* }) @ @8 }, G0 o! t
}
$ F, q- m0 J1 Z3 e% P' Y
},
2 \9 g# S0 ~$ p, n. C3 X
decimal: {
1 S1 u- i: o* G- W, O0 Q
type: String,
, L: ?( e2 p& `3 |4 I# b. _
required: false,
% D* ?* M5 {6 Y! A4 i
default: '.'
8 {6 [& u: m& M/ X; ?2 p
},
* o7 ^+ r7 M$ z( S0 s- n7 }: G
separator: {
0 L* D) ]$ M' N' J* w
type: String,
7 S$ O% U7 m6 K( D1 H" ?+ B
required: false,
4 c- b1 z1 c. _ n3 X( K9 O
default: ','
2 A' w/ F/ M0 f( S3 R3 c! z
},
I8 j% w- a* w+ H& Y8 u& c
prefix: {
. n4 A6 n2 C9 l8 T! B
type: String,
9 j/ ^! j, \5 M( f
required: false,
' Q7 e# ]5 g, T: [% {4 {( W2 t
default: ''
S- W4 H+ ~ }" \: R' |6 _/ J0 W
},
" a$ |- n( { N8 ]
suffix: {
; Q. G! I, Z* t, K2 d
type: String,
0 [4 S* ^, K$ f1 g/ J* j; h$ R
required: false,
; Y+ B! j- s5 |5 K
default: ''
* E4 H' ?- y y/ K/ ~
},
3 u1 s2 {- J! u2 ~& f2 S/ o) O6 `
useEasing: {
9 W6 n/ V8 M+ `* e: ]2 l; {" e
type: Boolean,
1 {$ i M4 ?6 A# w
required: false,
6 P! g3 U+ V" j# I$ Y
default: true
/ L7 h7 z" |4 n' P& U
},
+ k' q7 ? H1 h8 x. [
easingFn: {
( [6 F; X0 Y4 R1 Q8 Z* @, @4 D% r
type: Function,
& P9 c `' T. C& p
default(t, b, c, d) {
5 l' p- E w! G+ a" C; D5 l
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
& H" ] g% p9 f' A& `6 Z
}
2 ]. S2 C7 d$ U% A: E1 V: t9 v
}
^8 w' Y; x6 { c8 q# s* G6 Z+ J& M
})
" t2 V+ E8 b. D; Z0 O5 V- I
, p% d1 J0 n5 }/ ~8 B" {
const isNumber = (val) => {
+ q) l& E) K, P; m( L% S0 \
return !isNaN(parseFloat(val))
( |# H* w. S3 P6 [6 G
}
7 k' @' x# n; j7 ^
[% u. ^: j R6 s& f
// 格式化数据，返回想要展示的数据格式
. H' N- g0 E6 Y4 Y8 `
const formatNumber = (val) => {
5 z$ L3 j6 w7 {3 D6 D6 g' i8 s
val = val.toFixed(props.default)
! f- g! k5 D5 w/ L7 m
val += ''
: S% ]6 ~& ^, _5 C( M
const x = val.split('.')
8 x' L* j! l8 Z) W
let x1 = x[0]
& C! e6 n: y' y* y/ h1 ^3 S; ?
const x2 = x.length > 1 ? props.decimal + x[1] : ''
3 Q- E9 V. S& b4 [) j: o" U
const rgx = /(\d+)(\d{3})/
' k7 A/ }5 a5 o0 u, i9 w
if (props.separator && !isNumber(props.separator)) {
( r* m0 g6 v( k; i" e& L
while (rgx.test(x1)) {
; b- l }6 }. J
x1 = x1.replace(rgx, '$1' + props.separator + '$2')
& D: _& G; u& U6 H E
}
f \/ w4 Z \9 m3 l) x
}
+ f' B* f( {, z5 i8 @# z8 l8 M4 o8 W( y
return props.prefix + x1 + x2 + props.suffix
) \4 L9 l3 m/ a4 E" o7 ~
}
4 q# i: w8 S$ z, p& O/ u
+ D- [ t z0 b" S5 v
// 相当于vue2中的data中所定义的变量部分
, U$ u4 V `! |0 _, d6 w8 F: ]5 H
const state = reactive({
4 m: x1 S( y1 l" I' U0 i
localStart: props.start,
) t7 s, m0 f# ~# C! p5 b, \( S7 i
displayValue: formatNumber(props.start),
1 v# p$ l* @0 O! T0 y0 _
printVal: null,
5 J1 }7 F- {. \* z
paused: false,
9 U5 S$ t0 W# V9 \/ R# R( u; L% N! L
localDuration: props.duration,
1 p& v- b) V: M0 y. K: ?7 |0 g
startTime: null,
8 @0 L" Q4 j+ D) ^% Z: u
timestamp: null,
* P; n" q) {9 c9 a3 n. K
remaining: null,
9 L' S0 ]% |/ ?
rAF: null
/ v( [2 a! V, p: D
})
3 }8 A" C3 R; i( ^& h5 C8 [+ A1 e
& r, F6 {' J) i/ W
// 定义一个计算属性，当开始数字大于结束数字时返回true
$ I2 Q) V) m, h
const stopCount = computed(() => {
5 a' F' r+ n( ^" y' r
return props.start > props.end
/ X. H0 T( l6 r: v6 Y; e$ Z" q5 L
})
1 ~, j C; x, a8 C- M& @. j/ r
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
' u' B' m/ Y' B( ^0 @2 |. G4 D
const emits = defineEmits(['onMountedcallback', 'callback'])
6 `! Y% D3 n* g6 q
$ h* M: Z' Y9 R- O; t
const startCount = () => {
' h/ U! j$ y H) \" U
state.localStart = props.start
5 C: ]) i5 W0 o0 m+ {/ ^
state.startTime = null
( R+ i* `( y5 W; x% D
state.localDuration = props.duration
7 u, V: E( W a
state.paused = false
5 g* T) X9 j( F( N# U, Y
state.rAF = requestAnimationFrame(count)
/ @% d! b2 `" D; s* U3 p
}
4 c0 s7 f x4 f* ^# `& ^- G' ^
" W2 @# h" B, O; h9 U# ]% H7 n
watch(() => props.start, () => {
) q9 {! V3 e. H/ C! Z/ j
if (props.autoPlay) {
2 Z( J& h( U- g2 {! F9 G# I* D
startCount()
6 L0 p& E9 q+ t% P/ x$ Q- e
}
u* R+ Z/ E, z" M; @9 d
})
/ {# Q% |7 Q1 G+ P& h+ V+ P
- s9 g8 Q9 O- P0 w8 b! `3 Z
watch(() => props.end, () => {
/ ~6 L2 _* z- p$ u: [
if (props.autoPlay) {
8 |$ c) ?: X% V% \% E7 \
startCount()
3 G7 v. R" n0 K" }7 M; z
}
( f9 C0 z) k# p! D. b# g
})
" a! B/ |6 U1 c' i0 {
// dom挂在完成后执行一些操作
* S2 w7 L/ t4 \3 r ^9 t+ \
onMounted(() => {
2 a& R& e1 x( | r+ Q0 D: t
if (props.autoPlay) {
& y* M, d% Z: J1 ^; Q
startCount()
" S' q! e% k' A E! d) l) [! F
}
, R8 |9 v3 l- M) U7 [# T5 g
emits('onMountedcallback')
; q9 s) V7 `, H3 O# A; p7 T1 u+ P' Z
})
1 ~$ d# R) o) F1 n
// 暂停计数
( b8 u& R2 Q$ H) X3 z; K
const pause = () => {
! h( S6 b5 m. _8 z2 m+ w, l
cancelAnimationFrame(state.rAF)
9 `/ K8 H7 K8 e z, L
}
6 i+ v. X' M# I1 z# \( E. Q
// 恢复计数
: ?* T& C: Z1 [* j$ l2 g4 c
const resume = () => {
9 Y* P( {6 y1 T D" I$ b& |
state.startTime = null
( J! T, U0 B+ u
state.localDuration = +state.remaining
' W6 U6 i" K3 C( M5 j
state.localStart = +state.printVal
7 u! L2 w! o1 Y
requestAnimationFrame(count)
8 C# u6 T" A# L1 h7 t" Y0 G4 X
}
. ]# i# s+ H( ?* l# S2 @
8 N5 J8 j' s# k5 V$ `9 k
const pauseResume = () => {
. w& H% \1 e6 e% `6 ?/ ?
if (state.paused) {
" o3 P$ i o/ p9 Z% g( S% |
resume()
% B y- k, H W$ ` k
state.paused = false
& l0 N9 j6 d+ ^- i
} else {
- N! F( d+ {/ L: C
pause()
0 @' M" y d% G t# j
state.paused = true
1 o4 c# h( P/ l4 i# D6 d
}
q. f% D5 H/ h$ c/ F. u7 z
}
5 k; l8 b" d" b
2 b1 |+ f1 t. W
const reset = () => {
, H3 N. j' q+ H$ A; k7 B
state.startTime = null
: x" D( Y3 q1 G0 T
cancelAnimationFrame(state.rAF)
; H8 ~8 \1 i$ p- q5 `9 K* }
state.displayValue = formatNumber(props.start)
+ O# p; t# ]* K
}
& ]! k- m% L+ v) i
6 Z$ f3 }! J/ L; T. @
const count = (timestamp) => {
& R' F1 A( I) F7 S* C8 ^# t
if (!state.startTime) state.startTime = timestamp
7 o0 c- \- ]' X* q% u1 F
state.timestamp = timestamp
2 _0 _& V9 _+ s3 I, U! b
const progress = timestamp - state.startTime
) v$ r/ H# r+ a% D
state.remaining = state.localDuration - progress
. { r) l( E* F
// 是否使用速度变化曲线
" ?! s' _$ l3 S# t
if (props.useEasing) {
$ h/ f4 p A# |/ A. i7 Q
if (stopCount.value) {
2 _5 e/ B2 l( p* K* m4 L5 Z; m
state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
2 r8 m& D: e' u% x( `
} else {
( f5 Y* h: R% I' @2 K& W9 y
state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
4 a8 X: u+ e( a, [6 H* r
}
: C O/ [% k2 z$ V( b
} else {
, m5 U/ @: ~: b. f( q/ K
if (stopCount.value) {
5 A7 Y* U; ~$ W! Y
state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
8 Z; }4 C `$ m( y
} else {
; I# _7 N! ~5 j: E5 w
state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
: w1 ~% N1 s+ m0 v
}
5 w2 r& Q* H# q, ^$ O
}
8 Z- o* Y. u' o7 D9 [! {5 ^
if (stopCount.value) {
r) g3 |: F! E2 m; w, Y4 Y
state.printVal = state.printVal < props.end ? props.end : state.printVal
; q2 ^. V2 O7 a# y+ `2 |) n
} else {
5 X |/ }6 Y. c; t" g9 r8 B, I
state.printVal = state.printVal > props.end ? props.end : state.printVal
; y2 q" V( \( N* k# `
}
: l8 e" j, E* E3 A9 U, ^4 p
2 P1 s+ j5 P8 ~5 p' \5 u$ z
state.displayValue = formatNumber(state.printVal)
4 _4 ~6 V1 u5 E+ h/ Z
if (progress < state.localDuration) {
0 q% L5 h7 Y, Y$ t! X: [; g
state.rAF = requestAnimationFrame(count)
* d" Y, g/ J0 V8 n2 W5 m
} else {
, |: ?$ F/ G, e- c
emits('callback')
' t- q0 Z* E/ _, u/ Q) e% A
}
; V7 C" }8 x! _& _# y/ K& n2 g
}
7 b" M2 N d" u8 r3 `( Y* y
// 组件销毁时取消动画
/ B1 \" L$ q# s& G t
onUnmounted(() => {
* [8 R" [, T; E7 a0 ^7 E
cancelAnimationFrame(state.rAF)
2 m& E8 {8 W6 M g2 E
})
$ K; b N$ W% N: c# K
</script>
; J+ K7 ^* w* L5 C
w$ F( w* g0 e
1
% u2 p5 f- {+ m. w7 ?
2
, [ |4 e% z% R0 W# q% C( b. u' b
3
2 U$ {& U* H3 \0 [- C, O' l P3 U
4
e& S1 c( j" D* M. h& o7 y, t L( P: V
5
8 d( U% b* ^7 K/ o: [
6
]6 [+ ]" a$ V/ k: D9 T
7
) N2 _& h3 P# T- g5 o
8
9 T) c- o, i4 V
9
: @3 ?9 E/ }6 f. C1 `* ?" n' G
10
# W& |2 C2 u* d0 r5 z
11
9 b6 i; C, v& T
12
, \, n7 [. h; j( v+ v
13
5 Z$ ^% k+ z7 Y- h2 g
14
7 U% u' M/ c5 u# J3 |8 T5 q
15
; w2 n8 a2 R$ B% h1 q3 u
16
) r& u+ l. _& @8 j" O+ X
17
/ A) P: U) U3 a, D& n, H3 y0 t, R! O" _
18
: H! E% J8 s2 G0 @5 S
19
: V- Z" O; v; E
20
# S, {7 a) V$ X1 Y
21
) j% L5 D+ ?2 ^3 k) m
22
3 t0 ~" H% g# R: o b' Z4 v
23
! a) d# Z# j5 ~- f1 q
24
p) Q6 J- @1 g R3 \! u2 {
25
! }6 r Y/ ^4 L& N! ^
26
' f6 c; [2 E9 \6 H' S* _
27
( |* u5 U/ C7 Q+ B* o; Z# Q1 n
28
, U, }! B: w7 [) c f1 K
29
" T6 Y, _$ k3 {
30
1 W9 t! L1 f0 L& q
31
' O. u1 E7 ?1 q' F* Q0 y1 m$ R
32
. z4 T0 M9 }: f2 ` d/ _ |- A
33
3 q4 M! \. i3 d' [. i/ t
34
5 A+ `6 j. ~3 [$ E5 G) W
35
5 G0 n$ a9 Y j$ e: C f$ e7 u N
36
3 q5 I( U* ^6 [( ]1 t' N% b- f$ R S) k
37
( [& y$ v" Q$ u: }$ Z" k6 F# I
38
9 ~ l* c1 I# r1 H
39
. l& H2 |7 P8 |
40
( Z% s. W% X; s- R5 A* R; B
41
6 j0 }8 v0 C. @9 ~8 `$ N
42
- ~8 Z+ `* a% p$ o& q3 ?+ ]7 Y! h
43
; H4 B( T5 B: q0 ~2 H
44
( U+ t) w5 C6 m1 G
45
; X& a p) P4 F% `
46
$ X1 |, c3 I/ k) j+ ]' A' e
47
+ b) m! w1 k* X% S9 h& ]: y* c! g
48
3 O9 \! |+ a# L- R+ v
49
# q8 u5 g6 ~( K+ r0 n" [# S
50
; \4 H* g3 `; o, {$ |0 S
51
- C7 ?% v4 u5 {: g
52
, @% Y E/ D8 J3 J; ?
53
. H8 p9 h( g3 [* s! }6 e/ g! x
54
' R8 k( w; u* I: N* l/ G" d
55
9 F8 W3 n7 `( v; y/ i
56
7 b1 }) q/ f8 A7 D: s. `' K/ W
57
( ]1 c0 q0 V: M$ M
58
% D% ]/ h# I7 S: o/ f, x3 m" Y
59
% \" z0 t& [: G3 u7 ~
60
# x' ~# P1 D! N' R B5 g
61
: V9 D/ z3 ~2 n; t
62
8 }0 u4 S; }" q
63
) ]9 d% K8 C/ \5 {1 N* e" t m7 A5 [
64
# p1 {% I4 I$ [* P5 J, m m$ F
65
; z6 i/ J& R# n
66
% ?9 R4 M. w0 `( i/ l( h
67
) J! S; @! m; ]; I T
68
4 N9 Q: n. h- v& w2 v8 k9 D
69
, A8 a) l7 ]1 K5 z1 Z# Z0 |+ G
70
# w* Q/ x8 h4 D0 P' o( Y( h
71
/ Y) P' D/ D* D# X
72
0 f. r/ B- q& b5 B$ V7 l2 }2 C3 n# T- o
73
) M/ j+ \+ U: a
74
- ~ G7 ]9 ]; @% ]1 f0 }
75
+ j6 A7 m& H7 o. I* ~! E: s8 z
76
4 t" \& ?8 o o% J5 P5 P- y: y
77
% Z* U- I& E' q3 [: K. P, t/ O% u
78
2 g! y' q( ~/ M1 k8 e- Z! q
79
3 j) y4 {. T# F- F
80
9 Y& o; A7 e! X+ D: t/ n4 k
81
9 |$ k; j0 }3 m; }0 v I
82
# f6 N+ L. k- f) b i
83
4 T! N7 [4 W; q( S- r4 g, X
84
4 a5 P3 u6 u7 B$ s1 a9 K
85
$ ]! Z) t# h2 D1 x/ A
86
) M: f1 \" d: M5 t ?% i G, r6 r. H
87
6 q, X/ W, F c: l2 w5 X; Q
88
! r: ~$ {7 z) ?7 g+ O$ _
89
5 d6 C( y& q$ s# H
90
3 g) Y( B* C2 r- m
91
1 B- I% F, D9 d, s$ B. E7 w
92
: `1 y, I) \% {( m
93
7 v5 r) }9 Y4 N9 O, }0 @6 T) r
94
1 K- L* H8 i5 V$ S7 Z* e
95
+ }8 C) n* u+ M: w
96
' K: s: e" g5 K- D
97
& e1 p s: @% U) A0 V
98
) K! y0 d! X6 t+ `+ B( A3 M; _
99
' e8 l( t _, }4 L
100
# E8 W% x% F2 n8 b+ [
101
H; l% A% p& \8 v0 w
102
) ?5 X* ~0 Y1 r9 i6 C7 e
103
# G4 X: J) B9 J; |" J8 K
104
9 x7 ]' Z6 m+ p- w K
105
4 m) Q( ~( H t! K3 Z m0 G
106
4 r9 }3 J, h5 ]
107
3 k t4 c3 s3 C% g
108
# I) Q3 Z" f9 m) S, j2 Q
109
- T& m' m% L8 v/ U9 d ^
110
6 |; o3 d% A @& H- [& R$ J5 x
111
4 |, _& d9 a+ q9 `4 q; B) t
112
& L9 ^5 n" i) X0 Q% q3 Y+ N
113
& _+ r( @3 [) O) k
114
. D, c5 v0 s+ S% k+ y: M: ]- X5 C
115
: O7 y O4 z( k2 W
116
- p6 {9 e) y2 {: l7 m, @3 l
117
+ i* W& x- O& M" N
118
2 w( O1 N, n' s: k1 R" k
119
, Y' z/ s, c8 R, `$ d; k/ m
120
7 v' v2 t5 |( d
121
0 c8 q9 J0 G: I: f, d9 E B
122
9 Z* x* R7 s2 I8 O) g6 y+ v
123
k" r1 y I6 Y9 d6 e
124
: [% j/ i7 Z! i2 A
125
2 A5 f5 L) z, c( v4 r" E* h& J0 n" ~
126
2 B, D, q' M, U4 M' [
127
) e; ]% t1 h3 x _
128
6 o( x1 L- d& Q' {0 a: H
129
! J) c$ p$ p9 M% ^# P
130
2 }) o% n, F7 M; f; i2 H9 p
131
. r, \, V" J9 B @; y
132
" w& Q3 O& j/ M0 u5 P
133
: t( \7 d* [6 I& f- B- V
134
7 `8 r) M" D) r8 `
135
9 E% S, z* Z5 g
136
- h J! b+ [9 z+ Z4 G& y. N- ~
137
6 J* ^/ A5 c7 R$ ~
138
5 p E4 S7 _5 q9 W9 \
139
0 |1 y0 K0 ]1 s$ z( v5 n* A- A
140
( ^' Z0 I& J7 l; q, q6 P
141
8 z# n, x' W5 k& T% l1 B' s
142
: o, U' m% M& V4 L" u
143
; K7 @ P8 L1 a+ A& e
144
3 N9 S9 b. p+ C& }# y) s
145
. `7 g6 w! D2 t1 X" F; q+ U& f; `* _
146
0 X4 I9 g5 b8 B8 Q0 G' B+ M
147
: B& ?+ ?0 S8 J" z( A$ u J% _) V
148
7 y$ c# A! E2 I$ j- p7 ]$ t9 Z- Z
149
$ C1 `0 q, P5 \" C
150
5 ^; \, z$ ~4 s
151
1 @; X- u4 `& e: K s) \
152
9 }6 c# a5 y9 A/ a
153
' Q2 _7 k( j* Q
154
4 o6 G0 E( O+ w# B8 f
155
4 k0 w, K9 `( A
156
9 S1 s8 F) c& @( \
157
: Y: B' F$ h/ Y" h5 N8 e) t
158
/ h- h3 q/ N# [! ^8 V1 ^
159
) o; T$ t0 Q, C0 m2 ~! z
160
& z n$ w& ]6 I3 q, g. |* ]9 V5 Z
161
& W8 C) K/ F" y; K1 Q$ m
162
; X9 ? f/ L( A$ w f+ ]" ]2 J
163
! Q c1 b+ D& U3 R c1 ^+ m
164
2 y' z: N4 \8 Q9 M. b% R$ T
165
, H2 g7 }) V1 q& x/ k0 D
166
2 t) T! D J& ?' _6 L4 X2 X3 {3 T
167
8 x2 f6 \" r9 Z8 F. e
168
$ s$ j3 R( a7 w# U
169
6 r/ i5 p# u0 R8 H1 g1 o
170
3 }/ U! d- r7 V
171
! O' `4 v' L8 J# n
172
1 e8 R' |& T; e( i/ V
173
) Y E; C( @1 `2 l
174
/ N9 f7 q( n+ D9 D2 e Y
175
- ]% D7 t% _8 ^: u2 t- q: Q
176
- p# B# p4 m- m6 |! i/ O
177
# p+ h' t& p5 F: K. x5 _8 r
178
1 q; d3 S; g+ z) Q& Q( d
179
+ a% T( |7 T6 G' ^* v2 m
180
7 v8 t% [' M5 v5 n
181
4 `- B- a9 h ^; y' l
182
" @. G. b+ Z4 Q5 o. ~5 N
183
2 m+ `; ~' g% l# \$ b. j% n
184
/ ?( h# G- M% Q1 G
185
9 L) O: ]2 }8 `" p0 z7 |: J$ J
186
( F+ x& \4 g: j, e8 N
187
1 A3 q; C! H) Q5 z6 @* o! U6 o
188
3 F+ A" k( S: N4 `* b
189
c, @" z( S$ r1 B
190
7 H3 C# `. v0 p u/ |3 f" z
191
1 v' Y ]$ q) R0 n
192
. x3 a! e7 R. M7 G( K* |" }1 e9 O
193
% q, _ |' U, W
194
9 L" X+ }6 G+ f7 R5 G- S/ s5 `
195
% e( c& `1 j/ c$ p* r
196
$ `' k* p, n/ k$ N7 o2 g$ q7 j
197
' Y! l& Y- E6 i. u) K/ X
198
4 f9 q: r2 T6 ^: [: Y' ?# T
199
9 x. S' F# F0 k: r4 A
200
7 h) C0 q# I3 B5 U6 }
201
* a, q& T7 T8 Y: M
202
% w; f- G0 D( _
总结
6 B" z# r% T5 U$ M. g1 F9 a
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
% L2 q! f. \7 @
) }8 x+ _1 i6 q. |- w- C. | A" w' v
demo演示
5 |0 W9 r! n. O. N$ _
后续的线上demo演示会放在
$ I! D$ b9 H/ @( ^1 }* I: C
demo演示
9 k/ A0 {2 X, @5 x; a: G# J+ n& B6 C
完整代码会放在
7 o, J2 k% i. V5 x1 b9 b
个人主页
% O6 N5 k1 U3 \8 h
! @) ^! O9 _% o5 J
希望对vue开发者有所帮助~
! v: s9 M$ S0 B* X7 l3 q, }8 G
0 i$ M5 A, R( x6 s6 v
个人简介：承吾
$ j' ~/ j5 Y" z2 U3 p1 S/ D
工作年限：5年前端
$ P$ a0 e& v3 C4 s. }
地区：上海
& J1 w$ x0 S/ ^/ \# u( v R
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
" J4 w8 i8 G$ g0 s3 k7 d6 @
* I' B: n8 v( G' \- z9 ~/ E
+ V' W0 n# O- a) j& Q
y: z i1 s' F R
( p0 J/ N" @7 ]
————————————————
1 E3 n6 m! s* @% A
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
# a0 y: N2 x; c) v
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
/ V: C1 x' F: C Z+ c7 [
% k8 M" l# S, x) O
5 H! F2 A1 |5 d5 k- s0 y
欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)
Powered by Discuz! X2.5