Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lvjiaxuan/vue-number-roll
vue 2/3 数字滚动组件
https://github.com/lvjiaxuan/vue-number-roll
typescript vue vue-demi vue2 vue3
Last synced: about 1 month ago
JSON representation
vue 2/3 数字滚动组件
- Host: GitHub
- URL: https://github.com/lvjiaxuan/vue-number-roll
- Owner: lvjiaxuan
- License: mit
- Created: 2019-10-09T08:24:16.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-08T01:03:53.000Z (9 months ago)
- Last Synced: 2024-04-08T02:33:28.673Z (9 months ago)
- Topics: typescript, vue, vue-demi, vue2, vue3
- Language: Vue
- Homepage: https://lvjiaxuan.github.io/vue-number-roll/
- Size: 674 KB
- Stars: 11
- Watchers: 3
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-number-roll
[](https://www.npmjs.com/package/vue-number-roll)
[](https://github.com/vueuse/vue-demi)
[Vue3 Preview](https://lvjiaxuan.github.io/vue-number-roll).
[Vue2 Preview](https://lvjiaxuan.github.io/vue-number-roll/vue2).
## Install
```sh
npm i vue-number-roll
```
## Props
```ts
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
```ts
expose({ roll, reset: init })
```
## Development
Run `nr dev`.
> [!WARNING]
> Do not modify the dev dir to vue2's, I can't figure it out for now.
### Preview vue 2/3
- `pnpm run preview:vue3`
- `pnpm run preview:vue2`