Countup.js：vue-countup-v2（npm）数字滚动插件

最新推荐文章于 2024-09-13 21:56:44 发布

转载最新推荐文章于 2024-09-13 21:56:44 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dreamsqin/p/10881361.html

文章标签：

#javascript #ViewUI

博客介绍了CountUp.js的官方地址和demo，详细说明了其参数，包括start、end等，以及options中的设置项，还提及了start、pause/resume等方法，最后给出了vue代码的转载地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、官方地址：http://inorganik.github.io/countUp.js/

2、官方demo：

3、参数说明：

params——start（开始数字）、end（结束数字）、decimals（小数位数）、duration（持续时间）

options——useEasing（设置宽松）、useGrouping（是否使用千位分隔符）、separator（千位分隔符）、decimal（小数点分隔符）、prefix（前缀符）、suffix（后缀符，可以加单位）

methods——start（开始）、pause/resume（暂停/重新开始）、reset（重置）、update（更新到该值）

4、vue代码：

<i-count-up
    :start="0"
    :end="total"
    :decimals="0"
    :duration="2.5"
    :options="options"
></i-count-up>

import ICountUp from 'vue-countup-v2'

export default {
    name: 'dashboard',
    data () {
      return {
        options: {
          useEasing: true,
          useGrouping: true,
          separator: ',',
          decimal: '.',
          prefix: '',
          suffix: ''
        },
        total: 100
      }
    }
}

转载于:https://www.cnblogs.com/dreamsqin/p/10881361.html