vue-count-to (數字滾動元件)

參考地址:https://www.cnblogs.com/mahmud/p/17784975.html

<div ref="statsSection" class="stats-section">
           <div class="numdiv">
              <div class="numdivc xq-flex-cbetween">
                  <div class="xq-center">
                      <div class="xq-bold xq-white numtel">4大板塊</div>
                      <div class="xq-bold xq-white numstel">應用場景</div>
                  </div>
                  <div class="xq-center" v-if="showCount">
                      <div class="xq-bold xq-white numtel"><count-to :startVal="0" :endVal="5000" :duration="2500" />+</div>
                      <div class="xq-bold xq-white numstel">雲報價次數</div>
                  </div>
                  <div class="xq-center" v-if="showCount">
                      <div class="xq-bold xq-white numtel"><count-to :startVal="0" :endVal="3000" :duration="2500" />+</div>
                      <div class="xq-bold xq-white numstel">標識管家使用者數</div>
                  </div>
              </div>
           </div>
 </div>

 mounted(){
   this.observeStats()
}
observeStats() {
	const observer = new IntersectionObserver((entries) => {
	if (entries[0].isIntersecting) {
		this.showCount = true // 當元素進入視口時，顯示計數
		observer.disconnect() // 只觸發一次
	  }
	})
	observer.observe(this.$refs.statsSection) // 觀察 statsSection 元素
 }

滾動到某個區域才顯示