vue3数字动画插件countup.js

  countup.js 是一个轻量级的 JavaScript 库，允许你为网站上显示统计数据或计数器时平滑地动画化数字。CountUp 类被用来创建计数器实例，可以平滑地从一个数值变化到另一个数值。

     只是用户视觉更好一些。

 1、安装插件

npm i countup.js

2、个人是封装了组件

1. 使用组件

import countup from '@/components/countup.vue';<div class="card-content"><countup class="card-num color1" :end="6666" /><div>用户访问量</div>
</div>

1. 组件

options  初始值，其实没有太过要求，因为一瞬间就过去了，可以设置也可以不设置，如果用户要求较高，可以进行调节

<template><span ref="countRef"></span>
</template><script setup >
import { onMounted, ref, watch } from "vue";
import { CountUp } from "countup.js";const props = defineProps({end: {type: Number,required: true,},options: {type: Object,default: () => ({}),required: false,},
});
const countRef = ref(null);
let countUp;// props.options  初始配置
// let options =  {
//     startVal: 700, //初始值
//     duration: 10, // 动画持续时间（秒）不设置动画速度最快
//     useEasing: true, // 使用缓动效果
//     useGrouping: true, // 使用分组分隔符（如1,000）
//     smartEasingThreshold: 10, //对于高于此值的大数进行平滑缓动
//     separator: ",", //分隔符逗号，
//     decimal: ".", //小数点
//   }onMounted(() => {                  // props.end  结束值countUp = new CountUp(countRef.value, props.end, props.options);if (countUp.error) {console.error(countUp.error);return;}countUp.start();
});watch(() => props.end,(newVal) => {if (countUp) {countUp.update(newVal);}}
);
</script>