轻量级数字动画插件CountUp.js。vue中使用

简介：CountUp.js 是一个无依赖的轻量级 Javascript 类，可用于快速创建以更有趣的方式显示数字数据的动画。可以控制计数器的暂停/恢复/重置等状态;通过设置startVal和endVal参数,countUp可以在任何一个方向上计数;countUp兼容性超强,兼容所有的浏览器

安装

npm i countup.js

vue中使用

<span ref='countups' class="cout_up_num"></span>

import { CountUp as ICountUp } from 'countup.js'
{
  delay: 999, //延迟时间
  coutUpEndVal: 800, //最终数字
  coutUpOptions: {
    startVal: 700, //初始值
    duration: 10, // 动画持续时间（秒）不设置动画速度最快
    useEasing: true, // 使用缓动效果
    useGrouping: true, // 使用分组分隔符（如1,000）
    smartEasingThreshold: 10, //对于高于此值的大数进行平滑缓动
    separator: ",", //分隔符逗号，
    decimal: ".", //小数点
  },
}
methods:{
	initCountUp() {
            let demo = new ICountUp(this.$refs.countups, this.coutUpEndVal, this.coutUpOptions)
            if (!demo.error) {
                demo.start()
            } else {
                console.error(demo.error)
            }
            //循环更新
            // var newCout = 0;
            // setInterval(() => {
            //     newCout = this.updateCoutUp();
            //     this.coutUpEndVal=this.coutUpNewVal;
            //     demo.update(newCout);
            // }, 5000);
        },
         updateCoutUp(){
            //模拟请求后数字变更
            this.coutUpNewVal=this.coutUpEndVal+1000
            let newCouts= this.coutUpNewVal
            console.log(newCouts,'数字');
            return newCouts
        }
}

普通用法

import { CountUp } from './js/countUp.min.js';

window.onload = function() {
  var countUp = new CountUp('target', 2000);
  countUp.start();
}

vue-countup-v2：CountUp.js 的 Vue.js 组件包装,里面有另外的创建写法
https://github.com/xlsdg/vue-countup-v2?tab=readme-ov-file

github链接: https://github.com/inorganik/countUp.js.
在线演示地址: https://inorganik.github.io/countUp.js/.