vue3版本请移步 vue3-number-roll-plus

在线演示

安装

npm install vue-number-roll-plus --save

使用

基本使用

<template>
   <vue-number-roll-plus
      :number="9999"
      background="transparent"
    >
  </vue-number-roll-plus>
</template>

<script>
import VueNumberRollPlus from "vue-number-roll-plus"
import "vue-number-roll-plus/main.css"
export default {
  components: {
    VueNumberRollPlus
  }
}
</script>

属性

| 属性 | 属性含义 | 类型 | 默认值 | | :---------: | :----------: | :-----------: | :-----: | | number | 传入的数字 | Number/String | 0 | | size | 尺寸(small,normal,large) | String | normal | | isSemicolon | 是否三位分隔 | Boolean | false | | speed | 滚动速度(s) | Number | 1 | | background | 背景色 | String | #0e68cc |

事件

| 事件名 | 事件 | 参数 | | :----------: | :------------: | :----: | | numberChange | 数字变化后触发 | number | | done | 数字滚动结束之后触发 | number |