lvjiaxuan / vue-number-roll

vue 2/3 数字滚动组件

vue-number-roll

Vue3 Demo

Vue2 Demo

Usage

Install

npm i vue-number-roll

Props

props: {
  start: {
    // The start number.
    type: [ Number, String ],
    default: 0,
    validator: (value: number | string) => Number.isInteger(+value) && +value >= 0,
  },
  end: {
    // The end number.
    type: [ Number, String ],
    default: 0,
    validator: (value: number | string) => Number.isInteger(+value) && +value >= 0,
  },
  totalLength: {
    // The total length of number, padding start with `0`.
    // It would be ignored, if it is less than the start number and the end number
    type: [ Number, String ],
    default: 0,
    validator: (value: number | string) => Number.isInteger(+value) && +value >= 0,
  },
  reverseRollDirection: {
    // Reverse the direction of the rolling.
    type: Boolean,
    default: false,
  },
  immediate: {
    // Set `true` to roll immediately on mounted.
    type: Boolean,
    default: false,
  },
  itemClass: {
    // Set style to number item, like background-color/border/font-size, etc.
    type: String,
    default: '',
  },
  transitionDuration: {
    // The value is same as `transition-duration`.
    type: String,
    default: '3s',
  },
  transitionTimingFunction: {
    // The value is same as `transition-timing-function`.
    type: String,
    default: 'ease-in-out',
  },
  transitionDelay: {
    // The value is same as `transition-delay`.
    type: String,
    default: '0',
  },
},

Expose

expose({ roll, reset: init })

Development in Vue 3

1. Open playgrounds/vue3/src/App.vue.
2. Edit:

<script setup lang="ts">
// import NumberRoll from 'vue-number-roll'
import NumberRoll from './../../../src'
import './../../../dist/index.css'

// ...

3. nr dev3 on root.

Preview vue 2/3

• pnpm preview:vue3
• pnpm preview:vue2

Warning

I have no more edge cases consideration, so use at your discretion. And PR welcome.