原文链接如下: https://www.jb51.net/article/143262.htm ,本人在此基础上根据个人项目稍作修改 !
滚动组件部分代码如下:
<template>
<div class="number-grow-warp">
<span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0
</span>
</div>
</template>
<style scoped>
.number-grow-warp{
transform: translateZ(0);
}
.number-grow {
display: block;
}
</style>
<script
>
export default {
props
: {
time
: {
type
: Number
,
default:2
},
value
: {
type
: Number
,
default:0
}
},
data(){
return {
values
:0
}
},
watch
: {
value(val
){
if(val
> 0){
this.values
= val
;
this.numberGrow(this.$refs
.numberGrow
)
}
}
},
methods
: {
numberGrow (ele
) {
let step
= parseInt((this.values
* 10) / (this.time
* 1000))
let current
= 0
let start
= 0
let t
= setInterval(() =>{
start
+= step
if (start
> this.values
) {
clearInterval(t
)
start
= this.values
t
= null
}
if(start
== 0){
start
= this.values
;
clearInterval(t
)
}
if (current
=== start
) {
return
}
current
= start
ele
.innerHTML
= current
.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
}, 10)
}
},
}
</script
>
引用 & 使用 如下:
import numberScroll
from "../../components/number-scroll/number-scroll.vue";
<number
-scroll
:time
="1" :value
="allCount"></number
-scroll
>
欢迎光临
转载请注明原文地址: https://www.6miu.com/read-5031339.html
