数字滚动

Aug 25, 2022

数字滚动

适用场景

常用数据化大屏的echarts组件和ui组件

实现方式

使用vue-animate-number插件

使用方法

1.需要在项目终端下载安装vue-animate-number

npm install vue-animate-number

2. 在main.js引入

import VueAnimateNumber from 'vue-animate-number'
Vue.use(VueAnimateNumber)

3. 在页面中引用

<animate-number
  from="0"
  :to="num"
  :key="num"
  duration="500"
  :formatter="formatter"
  easing="easeOutQuad"
  ></animate-number>
<!-- 建议加上:key，这样可以适应num的动态变化 -->
<!-- 添加formatter可以使用小数 -->

4. 在js中使用小数

formatter: function(num){
  return num.toFixed(2);
}

Back

To Top