/**
* 数字过渡动画-目前版本-默认一秒之内完成过渡动画
* @param current number 当前值
* @param target number 目标值
* @param _this 传递 当前实例指向 this
* @param property string _this 和 property 是因为要把需要改变的属性传递进去,因为函数传参基础数据类型是值拷贝而不是值引用
* @param step number 当前版本支持 1 0.1 0.01 分别对应 整数变化、一位小数、两位小数
*/
export function numAnimation(current, target, _this, property, step = 1, totalTime = 1000, duration = 20, timer = '') {
clearInterval(timer)
let ternialStep = 0
if (target >= current) {
ternialStep = (target - current) / (totalTime / duration)
} else {
ternialStep = (current - target) / (totalTime / duration)
}
if (ternialStep > 10) {
ternialStep = parseInt(ternialStep).toString().split('')
ternialStep[ternialStep.length - 1] = 1
ternialStep = parseInt(ternialStep.join(''))
} else {
ternialStep = Math.ceil(ternialStep) || 1
}
if (current < target) {
timer = setInterval(() => {
if (step === 0.1) {
_this[property] = (_this[property] * 1000 + (step + ternialStep) * 1000) / 1000
} else if (step === 0.01) {
_this[property] = (_this[property] * 1000 + (step + ternialStep) * 1000) / 1000
} else {
_this[property] = _this[property] + ternialStep
}
if (_this[property] >= target) {
_this[property] = target
clearInterval(timer)
}
}, duration)
} else if (current > target) {
timer = setInterval(() => {
if (step === 0.1) {
_this[property] = (_this[property] * 1000 - (step + ternialStep) * 1000) / 1000
} else if (step === 0.01) {
_this[property] = (_this[property] * 1000 - (step + ternialStep) * 1000) / 1000
} else {
_this[property] = _this[property] - ternialStep
}
if (_this[property] <= target) {
_this[property] = target
clearInterval(timer)
}
}, duration)
}
}
/* 数字金额逢三加, 比如 123,464.23 */
export const numberFilter = function (value, cut = 2) {
//value为我们传进来的数据 比如 145775.422346
//cut 为需要保留的小数位数 -1为清空小数 0为保留全部位数的小数 传入多少即为多少 不传默认保留两位小数 传进来多少就截取多少
//数据校验
if (parseFloat(value).toString() == 'NaN') return '0.00'
// 将数值截取
let num = value.toString().split('.')
let zs = num[0]
let xs = num[1]
// 整数部分处理,增加,
const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, ',')
if (xs != null) {
if (cut == 0) {
return intPartFormat + '.' + xs
} else if (cut == -1) {
return intPartFormat
} else {
return intPartFormat + '.' + xs.substr(0, cut)
}
} else {
return intPartFormat
}
}
使用
<div class="user-number">{{ totalUser | numberFilter }}</div>
<div class="zoom-number">
<div class="zoom-number-item" v-for="(item, index) in zommDataList" :key="index">
<span>{{ item.name }}</span>
<span>{{ item.value | numberFilter }}</span>
</div>
</div>
import { numAnimation, numberFilter } from '@/utils/common'
data() {
return {
totalUser: 0,
zommDataList: [
{ name: '总数', value: 0 },
{ name: '占用', value: 0 },
],
}
},
filters: {
numberFilter,
},
numAnimation(this.totalUser, res.data.userTotalCount || 0, this, 'totalUser')
numAnimation(this.zommDataList[0].value, res.data.total || 0, this.zommDataList[0], 'value')
numAnimation(this.zommDataList[1].value, res.data.used || 0, this.zommDataList[1], 'value')
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)