count-up-number

vue 数字滚动组件

Usage

感谢大家的厚爱，问题反馈：[e-mail]

1:安装

npm install count-up-number --save
or
yarn add count-up-number

2:引入

在main.js中

// 导入组件
import countUp from 'count-up-number'
import 'count-up-number/lib/countup.css'
// 注册组件库
Vue.use(countUp);

3:使用

<countUp />

// 使用
export default {
  data() {
    return {
      number: 1234.5, // 滚动数字
      symbol: ",", // 千位分隔符
      itemHeight: 20, // 数字高度
      scrollTime: 1000, // 滚动动画时间
      className: "my-class", // 自定义class
      initStatus: true, // 初始是否滚动
    };
  },
  mounted() {
    setTimeout(() => {
      this.number = 918746;
    }, 3000);
  },
};

// 自定义样式使用
.my-class {
  width: 25px;
  margin-right: 10px;
}
.my-class .item {
  width: 25px;
  background: #f60;
  color: #fff;
}

日志

2023-09-03

修复传入相同数字不执行动画问题（注意：传入相同数字不会触发组件更新，需要单独处理，把再次传入的数字转换成字符串即可）。

2022-02-20

优化重复数字key值一样console报错。

API

<countUp
:number="123456"
:symbol=","
:scrollTime="1000"
:className="my-class"
:initStatus="true"
:itemHeight="30" />

number(必填)

滚动数字 [Number]

symbol

千位分隔符 不显示(默认) [String]

scrollTime

数字滚动时间(默认 1000,毫秒) [Number]

className

自定义样式 class [String]

initStatus

初始化是否滚动(默认 true) [Boolean]

itemHeight

数字滚动高度(默认 20px) [Boolean]