vue-count-to 简单好用的数字滚动插件

如果你想要实现在规定时间内，数字由某个值变化到另一个值的动态滚动效果，那么 vue-count-to 插件可以完美的进行实现

一、使用npm 安装

npm install vue-count-to

二、在需要使用数字滚动的页面文件中引入 vue-count-to

// user.vue文件

<template>
    <p>数字滚动面板区域: </p>
    <countTo
        ref="countTo"
        :startVal="startVal"
        :endVal="endVal"
        :duration="duration"
        :autoplay="autoplay"
        :decimals="decimals"
        :decimal="decimal"
        :separator="separator"
        :prefix="prefix"
        :suffix="suffix"
        :useEasing="useEasing"
    ></countTo>

    <button @click="start">开始计数</button><br/>
    <button @click="pause">暂停计数</button><br/>
    <button @click="reset">重置数字面板</button><br/>

</template>

<script>
    import countTo from 'vue-count-to'
    
      export default{
        components: {
          countTo
        },
        data(){
          return{
            startVal: 0, // 开始值
            endVal: 1000, // 结束值
            duration: 3000, // 持续时间，毫秒
            autoplay: false, // 是否自动播放
            decimals: 0, // 要显示的小数位数
            decimal: '.' , // 十进制分隔符
            separator: ',' , // 分隔符
            prefix: '' , // 前缀
            suffix: '' , // 后缀
            useEasing: true , // 使用缓和功能
          }
        },
        methods: {
          // 开始计数
          start(){
            this.$refs.countTo.start()
          },
          // 暂停计数
          pause(){
            this.$refs.countTo.pause()
          },
          // 重置数字
          reset(){
            this.$refs.countTo.reset() // 将数字面板中的数字重置为初始值 startVal
          },
        }
      }
</script>

三、vue-count-to Options（配置）

四、vue-count-to Function（方法）