vue3数字滚动组件

效果图

一、安装插件

npm i vue3-count-to

二、components文件夹下新建BaseCountTo.vue文件

<template>
  <BaseCountTo :endVal="endVal" :decimals="decimals" />
</template>
<script setup >
import { defineComponent, watch, reactive, toRefs, ref } from "vue";
import { CountTo as BaseCountTo } from "vue3-count-to";

const props = defineProps({

  endVal: {
    type: Number,
    default: (item) => {
      return 0.00;
    }
  },
  decimals: {
    type: Number,
    default: () => {
      return 0;
    }
  }
})

</script>

endVal是数字，decimal代表小数点位

三、组件挂载到全局

main.js中添加以下代码

import BaseCountTo from "@/components/common/BaseCountTo"
const app = createApp(App)
app.component("BaseCountTo", BaseCountTo);

四、页面中使用