<template>
<div class="d-number">
<img v-if="imgUrl.length > 0" :src="imgUrl"/>
<span>{{fNumber || cNumber}}</span>
</div>
</template>
<script>
export default {
props: {
imgUrl: {
type: String,
default: function () {
return ''
}
},
cNumber: {
type: Number,
default: function () {
return 0
}
}
},
data() {
return{
fNumber:0,
changeTime:20
}
},
mounted(){
var that =this;
that.fNumber = that.cNumber
},
methods: {
handleNumber(i,flagValue){
var that = this
var j = i + 1
var time;
if(flagValue > 0){
if(i < flagValue){
that.fNumber++;
time = setTimeout(function () {
that.handleNumber(j,flagValue)
},that.changeTime)
}else{
clearTimeout(time)
}
}else{
if(i < Math.abs(flagValue)){
that.fNumber--;
time = setTimeout(function () {
that.handleNumber(j,flagValue)
},that.changeTime)
}else{
clearTimeout(time)
}
}
}
},
watch:{
cNumber: function(curVal,oldVal){
var that = this;
that.fNumber = oldVal;
var diffVal = curVal - oldVal;
if(Math.abs(diffVal) > 1000){
that.changeTime = 1;
}else if(Math.abs(diffVal) > 500){
that.changeTime = 2;
}else{
that.changeTime = 3;
}
that.handleNumber(0,diffVal);
},
}
}
</script>
<style scoped lang="scss">
.d-number {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
img {
width: 20px;
height: 20px;
margin-right: 5px;
}
input{
border: none;
background: none;
overflow: visible;
}
}
</style>
注:img是动态数字前面的图标;
使用时直接:<dynamic-number :c-number="dNumber" :img-url="imgUrl"/>就可以。
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}