count-to大屏数字滚动

vue3项目

------------------------------------------------------------------------------------------------------------------------

安装

• npm install vue3-count-to --save

<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
 
<script setup>
   import countTo from 'vue3-count-to';
   import { ref } from 'vue'
   const startVal = ref(0)
   const endVal = ref(100)
</script>

vue2项目

------------------------------------------------------------------------------------------------------------------------

安装

• npm install vue-count-to

使用

<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
 
<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 2017
      }
    }
  }
</script>

参数说明

• startVal    开始值    Number    0
• endVal    结束值    Number    2017
• duration    持续时间，以毫秒为单位    Number    3000
• autoplay    自动播放    Boolean    true
• decimals    要显示的小数位数    Number    0
• decimal    十进制分割    String    .
• separator    分隔符    String    ,
• prefix    前缀    String    ''
• suffix    后缀    String    ''
• useEasing    使用缓和功能    Boolean    true
• easingFn    缓和回调    Function    
• Function Name    Description
• mountedCallback    挂载以后返回回调
• start    开始计数
• pause    暂停计数
• reset    重置countTo