[JavaScript知识库]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 = 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, '$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')

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系