vue3数字滚动动画

效果

1.新建组件countTo.vue

<template>
    <span>
        {
   {
    state.displayValue }}
    </span>
</template>

<script setup>
import {
    onMounted, onUnmounted, reactive, watch, computed } from "vue";
import {
   
    requestAnimationFrame,
    cancelAnimationFrame,
} from "./animationFrame.js";

const props = defineProps({
   
    //开始数字
    start: {
   
        type: Number,
        required: false,
        default: 0,
    },
    //结束数字
    end: {
   
        type: Number,
        required: false,
        default: 888,
    },
    //持续时间
    duration: {
   
        type: Number,
        required: false,
        default: 5000,
    },
    //自动开始
    autoPlay: {
   
        type: Boolean,
        required: false,
        default: true,
    },
    //小数点
    decimal: {
   
        type: String,
        required: false,
        default: ".",
    },
    //千分位间隔符
    separator: {
   
        type: String,
        required: false,
        default: ",",
    },

    //前缀
    prefix: {
   
        type: String,
        required: false,
        default: "",
    },
    //后缀
    suffix: {
   
        type: String,
        required: false,
        default: "",
    },
    //是否使用速度曲线变化
    useEasing: {
   
        type: Boolean,
        required: false,
        default: true,
    },
    //变化使用的函数
    easingFn: {
   
        type: Function,
        default(t, b, c, d) {
   
            return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
        },
    },
    //保留几位小数
    default: {
   
        type: Number,
        required: false,
        default: 0,
    },

});

const isNumber = (val) => {
   
    return !isNaN(parseFloat(val));
};

// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
   
    if (props.default) {
   
        val = val.toFixed(props.default);
        val += '';
        const x