最近开发项目的时候有个屏保的部分，就几个数字觉得过于单调，索性加点特效在里边，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>到此这篇关于vue实现数字变换动画的示例代码的文章就介绍到这了,更多相关vue 数字变换动画内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
