vue3_在vue3中使用滚动加载数字组件vue3-count-to

• 使用的是vue3-count-to组件

• 安装: npm install vue3-count-to --save

• 全局注册:

  • // main.js
    import countTo from 'vue3-count-to'
    app.use(countTo)
    

• 局部引入组件并使用

  • // xx.vue文件
    <template>
        <countTo
          :startVal="0" // 初始数据
          :endVal="item.num" // 最终显示数据
          :duration="3000" // 动画时间
          :ref="'countToRef' + item.id" 
          :suffix="item.id === 3 ? '+' : ''" // 数字尾缀, 根据自己的需要修改
        ></countTo>
    </template>
    <script setup>
    	import { CountTo } from 'vue3-count-to'
    </script>
    

• 官方文档

  • https://github.com/PanJiaChen/vue-countTo