VUE后台管理系统中对数字显示美化的插件--vue-count-to

在项目开发中，客户提出对数字显示进行美化 之前一直是对css样式进行设置 后来同事推荐这个插件vue-count-to。

动图我不会上传，具体展示效果为 金额在自定义时间内从0到金额总数的跳动变化

 Vue-count-to是一款简单好用的一个数字滚动插件，并且是一个无依赖，轻量级的vue组件，可以自行覆盖easingFn，你可以设置 startVal 和 endVal，它会自动判断计数或倒计时。支持vue-ssr。

安装方式

npm install vue-count-to//npm安装
cnpm install vue-count-to//cnpm安装
yarn add vue-count-to//yarn安装

代码使用

因为使用场景较少只存在部分数据显示页面，所以就采用按需引入了

import CountTo from 'vue-count-to'

export default {
 
  data() {
    return {
      startVal: 0
    }
  },
  components: {
    CountTo
  }
}

  <count-to
              class="count-1"
              :decimals="2"
              :startVal="startVal"
              :endVal="info.invest_money || 0"
              :duration="2000"
            ></count-to>
//开始值与结束值为自定义数据

相关配置

 提示：当autoplay：true时，它将在startVal或endVal更改时自动启动