一，vue3-count-to專案在npm庫的地址:

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

文件:參考vue-count-to的文件即可

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

說明：劉巨集締的架構森林是一個專注架構的部落格，地址：https://www.cnblogs.com/architectforest

         對應的原始碼可以訪問這裡獲取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

說明：作者:劉巨集締 郵箱: [email protected]

二，安裝vue3-count-to :

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

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

    <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>

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