npm i vue-number-roll
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({ roll, reset: init })
Run nr dev
.
Warning
Do not modify the dev dir to vue2's, I can't figure it out for now.
pnpm run preview:vue3
pnpm run preview:vue2