快捷導(dǎo)航

Vue中使用vue-count-to(數(shù)字滾動插件)詳細教程

更新時間：2023年09月07日 09:08:26 作者：會說法語的豬

這篇文章主要給大家介紹了關(guān)于Vue中使用vue-count-to(數(shù)字滾動插件)的相關(guān)資料,最近需要開發(fā)一個數(shù)字滾動效果,在網(wǎng)上找到一個關(guān)于vue-countTo的插件,覺得這個插件還不錯,需要的朋友可以參考下

1. 簡單介紹

npm官網(wǎng)：vue-count-to

vue-count-to 就是一個組件插件，咱們引入進來，可以去打印一下，它就是一個組件實例，使用components注冊一下，就可以在模板中使用了，具體方式如下：

2. 安裝

npm install vue-count-to

3. 引入

import CountTo from 'vue-count-to'

4. 注冊

components: {
  CountTo
},

5. 模板中使用

<CountTo
  :startVal='startVal'
  :endVal='endVal'
  :duration='duration'
/>

6. 測試完整代碼

<template>
  <div class="vue-count-to">
    <div class="count-to">
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
    </div>
  </div>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
  data() {
    return {
      startVal: 0,
      endVal: 100,
      duration: 3000,
      timer: null
    }
  },
  components: {
    CountTo
  },
  mounted(){
    this.timer = setInterval(() => {
      this.endVal = this.endVal * 2
    }, 4000)
  },
  destroyed() {
    clearInterval(this.timer)
  },
}
</script>
<style scoped>
.vue-count-to {
  width: 100%;
  height: 100%;
}
.count-to {
  width: 300px;
  height: 300px;
  margin: 100px 0 0 100px;
  border: 1px solid red;
}
.count-to span {
  font-size: 30px;
  font-weight: 700;
  font-family: 'YJSZ';
}
.count-to > div:nth-of-type(1) > span {
  color: red;
}
.count-to > div:nth-of-type(2) > span {
  color: blue;
}
.count-to > div:nth-of-type(3) > span {
  color: pink;
}
.count-to > div:nth-of-type(4) > span {
  color: yellow;
}
.count-to > div:nth-of-type(5) > span {
  color: green;
}
.count-to > div:nth-of-type(6) > span {
  color: orange;
}
.count-to > div:nth-of-type(7) > span {
  color: cyan;
}
.count-to > div:nth-of-type(8) > span {
  color: purple;
}
</style>