vue实现数字变换动画的示例代码
时间：2022-12-10 12:09:48 | 栏目：vue | 点击：次
最近开发项目的时候有个屏保的部分，就几个数字觉得过于单调，索性加点特效在里边，UI图数字部分如下：
emmm。所以加了个数字动态变动的效果
一开始直接在网上copy了一份。但是部分功能不太能满足需求 ，so，改动了部分，完美实现
改动部分：
1.数字不需要千位符，但是为了防止以后要有 所以加了个参数判断，默认是没有的
2.数字整数变动
3.组件改为行内元素，能更好的兼容页面样式
4.第二次数字变动在上次的数字累加
5.添加监听器防止页面不更新的情况
代码如下：
<template>
<span class="number-grow-warp">
<span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span>
</span>
</template>
<script>
export default {
name:'numberGrow',
props: {
time: {
type: Number,
default: 2
},
value: {
type: Number,
default: 0
},
thousandSign:{
type: Boolean,
default:()=>false
}
},
data(){
return{
oldValue:0
}
},
watch:{
value:function(value,oldValue){
this.numberGrow(this.$refs.numberGrow)
}
},
methods: {
numberGrow (ele) {
let _this = this
let value = _this.value - _this.oldValue
let step = (value * 10) / (_this.time * 100)
let current = 0
let start = _this.oldValue
let t = setInterval(function () {
start += step
if (start > _this.value) {
clearInterval(t)
start = _this.value
t = null
}
if (current === start) {
return
}
current = parseInt(start)
_this.oldValue = current
if(_this.thousandSign){
ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
}else{
ele.innerHTML = current.toString()
}
}, 10)
}
},
mounted () {
this.numberGrow(this.$refs.numberGrow)
}
}
</script>
<style lang="less" scoped>
.number-grow-warp{
transform: translateZ(0);
}
</style>
就酱紫，完美实现。
引用如下：
<template>
<div>
<numberGrow :value="toNowGantryNum" :time='30'></numberGrow>
</div>
</template>
<script>
import numberGrow from '@/components/numberGrow/index.vue'
export default {
name:'monitor',
components:{numberGrow},
data(){
return{
toNowGantryNum:1068319425,
}
},
}
</script>