一个好用的数字翻牌器vue-count-to

837 阅读1分钟

最近在写可视化大屏,需要用到数字翻牌器试了一下dataV的,不知道是我使用的方式有问题还是什么其他原因总之最终的效果不是我想要的。最后选择了vue-count-to这个插件。

  1. 安装
npm install vue-count-to
  1. 引入
import CountTo from 'vue-count-to'
  1. 注册
compontents: {
    CountTo
}
  1. 简单使用
<count-to
    :startVal="0" //初始值
    :endVal="100" //最终值
    :duration="5000" //动画时间
    :decimals="1" //精度(小数点后保留几位)
></count-to>
  1. 放一个最终的静态图

image.png