vue中的数字动画及数字逗号显示

需求：实现数字动画，并实现数字千位分隔符格式(8888,显示为8,888),数字从0-8888实现动画递增
utils/common.js

/*** 数字过渡动画-目前版本-默认一秒之内完成过渡动画* @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 = 0if (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] = 1ternialStep = 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] = targetclearInterval(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] = targetclearInterval(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, '$1,')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')

vue中的数字动画及数字逗号显示相关推荐

Vue中的Js动画与Velocity.js 的结合
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端进阶必备技能：Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
如何实现vue中的列表动画，如何封装vue动画
文章目录一.vue中的列表动画如何实现列表动画原理: 二.vue中如何封装动画第1个版本:css动画版第2个版本: js动画版(推荐) 一.vue中的列表动画如何实现举个例子: 列表动画原理 ...
js 或者vue中for循环去掉最后一个逗号
js 或者vue中for循环去掉最后一个逗号一个感觉很简单的问题,刚开始我没有思路,现在也没有更好的思路问题描述: 后端返回的一个数组,前端这边需要循环把名字展示,要求在展示时,每个名字后用** ...
VUE 中渲染Echarts 动画柱状图
VUE 中渲染Echarts 动画柱状图效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echart ...
vue中使用baidushare分享到微信无法显示bug解决方案
vue中使用baidushare分享到微信无法显示bug解决方案参考文章: (1)vue中使用baidushare分享到微信无法显示bug解决方案 (2)https://www.cnblogs.co ...
解决vue中img或元素背景图片无法显示或路径错误问题
1.在给vue中img元素动态绑定图片路径时会显示不出来图片: <span>普通:</span><img src="./video.png" alt= ...
Vue中实现过渡动画
文章目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画 ...
html数字动画效果,数字滚动动画效果
最近弄智库,看见百度文库有个文档数的数字在页面加载完后会有个小动画,数字一直向上刷,给人的感觉是文档数量一直在不断的增加.看了下实现效果,自己模拟了下,还挺不错的,效果如下: 智库已有文档 , 份说 ...

vue中的数字动画及数字逗号显示

vue中的数字动画及数字逗号显示相关推荐

最新文章

热门文章