vue.js3.x 使用vue3-count-to 组件(到可视区域才start数字滚动 vue@3.2.33 / vue3-count-to@1.1.2)

一，vue3-count-to项目在npm库的地址:

https://www.npmjs.com/package/vue3-count-to

文档:参考vue-count-to的文档即可

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

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/01/vue-js3-x-shi-yong-vue3countto-zu-jian-dao-ke-shi-qu-yu-cai/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，安装vue3-count-to :

1,从命令行安装

liuhongdi@lhdpc:/data/vue/guotou4$ npm install vue3-count-to --save
 
added 2 packages in 4s

2，查看安装后的版本:

liuhongdi@lhdpc:/data/vue/guotou4$ npm list vue3-count-to
guotou4@0.1.0 /data/vue/guotou4
└── vue3-count-to@1.1.2

三，使用vue3-count-to

HomePage.vue

html部分:

    <div style="width:100%;background: #ffff00;position:relative;">
        <div style="position:absolute;left:1rem;top:1rem;width:2rem;height:1rem;background: #ff0000;">
          <!---->
          <count-to :useEasing="false" style="font-size: 0.4rem;" :autoplay="false" :ref="refset" :startVal='800' :endVal='999' :duration='3000'></count-to>
        </div>
    </div>

 

js部分:

import {useIntersectionObserver} from "@vueuse/core";
import { CountTo } from 'vue3-count-to’;

…

onMounted(()=>{
      for (let i=0;i<itemRefs.length;i++) {
        //console.log(itemRefs[i]);
         useIntersectionObserver(itemRefs[i], ([{ isIntersecting }]) => {
          // 如果target对应的DOM进入可视区，那么该回调函数就触发
          if (isIntersecting) {
            // 被监听的DOM进入了可视区:此时调用接口获取数据；停止继续监听
           
            console.log(itemRefs[i]);
          if (typeof(itemRefs[i].displayValue) != "undefined") {
               if (itemRefs[i].displayValue < itemRefs[i].endVal) {
                 itemRefs[i].start();
               } else {
                 console.log("大于等于时不需要动画");
               }
            }
          }
        },{ threshold: 0.5 })
      }

四，测试效果 

五，查看vue的版本:

liuhongdi@lhdpc:/data/vue/guotou4$ npm list vue
guotou4@0.1.0 /data/vue/guotou4
├─┬ @vue/cli-plugin-babel@5.0.4
│ └─┬ @vue/babel-preset-app@5.0.4
│   └── vue@3.2.33 deduped
├─┬ @vueuse/core@8.4.2
│ ├─┬ @vueuse/shared@8.4.2
│ │ └── vue@3.2.33 deduped
│ ├─┬ vue-demi@0.12.5
│ │ └── vue@3.2.33 deduped
│ └── vue@3.2.33 deduped
├─┬ vue@3.2.33
│ └─┬ @vue/server-renderer@3.2.33
│   └── vue@3.2.33 deduped
└─┬ vue3-count-to@1.1.2
  └── vue@3.2.33 deduped