# vite数值滚动

**Repository Path**: vuespell/vite-numeric-scrolling

## Basic Information

- **Project Name**: vite数值滚动
- **Description**: 基于vue3+ts实现的数值滚动组件
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-10
- **Last Updated**: 2023-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 引入依赖
```
npm i vite-number-scroller
```


### 在入口文件中引入
```typescript
// 引入
import NumberScroller from 'vite-number-scroller'

// 挂载到全局
createApp(App).use(NumberScroller).mount('#app')
```

### vue文件中使用
```html
<number-scroller class="count-item" :roll-number="number"></number-scroller>
<number-scroller class="count-item" :roll-number="number" thousands></number-scroller>
```


#### 参数说明
```ts
// 组件参数
interface PropsType {
  cellHeight?: number // 高度
  rollNumber?: string | number // 当前数值
  dur?: number // 动画持续时间
  easeFn?: string // 动画 
  thousands?: boolean // 千分位 10000 => 10,000
}
// 默认值
const props = withDefaults(defineProps<PropsType>(), {
  cellHeight: 30,
  rollNumber: 0,
  dur: 1500,
  easeFn: 'ease', // 更多参数详见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
  thousands: false
})
```

发布npm操作：