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>