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>