1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
| <!--
| 功能：如果传递参数说明如果传入的：
| value:需要变化的数字，
| time设置的是多少个数字进行变化
| delay延迟时间
| -->
| <template>
| <div class="number-grow-warp">
| <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">{{elevallue}}</span>
| </div>
| </template>
|
| <script>
| export default {
| name: "NumAni",
| props: {
| time: {
| type: Number,
| default: 2
| },
| value: {
| type: Number,
| default: 720000
| },
| delay: {
| type: Number,
| default: 10
| }
| },
| data() {
| return {
| timeinver: {},
| timeinner: {},
| elevallue: 0,
| numflag: false
| }
| },
| watch: {
| value: {
| handler(newVal) {
| if (newVal) {
| clearInterval(this.timeinver)
| clearInterval(this.timeinner)
| this.numberGrow()
| // this.timeinver = setInterval(() => {
| // this.numberGrow()
| // }, this.delay*1000);
|
| }
| },
| immediate: true,
| deep: true,
| }
| },
| methods: {
| numberGrow () {
| let _this = this
| let step = Math.floor((_this.value) / (_this.time)) // 72000 720
| let current = 0
| let start = 0
| //回调函数
| if(step == 0){
| clearInterval(this.timeinver)
| current = _this.value
| this.elevallue = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
| return
| }
| this.timeinner = setInterval(() => {
| start += step
| if(start < _this.value){
| current = start
| this.elevallue = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
| } else {
| current = _this.value
| this.elevallue = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
| clearInterval(this.timeinner)
| }
| }, 50);
| }
|
| },
| mounted () {},
| deactivated(){
| clearInterval(this.timeinver)
| clearInterval(this.timeinner)
| },
| // activated(){
| // clearInterval(this.timeinver)
| // clearInterval(this.timeinner)
| // this.numberGrow()
| // this.timeinver = setInterval(() => {
| // this.numberGrow()
| // }, this.delay*1000);
| // }
| }
| </script>
|
| <style>
| .number-grow-warp{
| transform: translateZ(0);
| }
| .number-grow {
| letter-spacing: 2.07px;
| display: block;
| line-height:80px;
| }
| </style>
|
|
