## NumberScroll 数字动画
将一个数字以动画的形式动态渐变到指定值的组件。
![](https://img.kancloud.cn/00/0a/000a3eaca40b4ef04267f59edbe4a27f_950x85.png =400x)
### 代码示例
基础用法
> 组件v-model双向绑定数据,值发生变化时动画自动开始。
```html
<cvu-number-scroll v-model="number"></cvu-number-scroll>
```
手动开始
> 通过调用`this.$refs.numberScroll.start()`方法开始动画。
![](https://img.kancloud.cn/0b/ab/0bab2cd660404d58812dd1eebfe54647_725x86.png =400x)
```html
<cvu-row :gutter="16">
<cvu-col :span="5" style="padding-top: 6px">
<cvu-number-scroll ref="numberScroll" v-model="number"></cvu-number-scroll>
</cvu-col>
<cvu-col :span="2">
<cvu-button type="primary" @click="$refs.numberScroll.start()">开始</cvu-button>
</cvu-col>
</cvu-row>
```
### props
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| value | 数字,可使用 v-model 双向绑定数据。 | Number\|String | \- |
| font-size | 文字大小 | Number\|String | \- |
### methods
| 方法名 | 说明 | 参数 |
| --- | --- | --- |
| start | 开始动画 | 无 |
- 介绍
- 安装
- 快速上手
- 组件
- 基础
- Button 按钮
- ButtonGroup 按钮组
- 布局
- Card 卡片
- Col 列
- Collapse 折叠面板
- Divider 分割线
- Empty 空数据
- Row 行
- 导航
- Paginator 分页
- PaginatorMini 分页
- Tab 标签页
- 表单
- Cascader 级联选择
- PasswordStrength 密码强度
- Print 局部打印
- Table 表格
- Upload 文件上传
- 视图
- Calendar 日历
- Drawer 抽屉
- Loading 加载
- Message 全局提示
- Modal 对话框
- Notification 通知菜单
- Poptip 气泡提示
- Preview 图片预览
- PreviewPdf pdf文件预览
- Tooltip 文字提示
- Tree 树形控件
- 方法
- Copy 复制到剪贴板
- DescNotice 桌面消息通知
- Html2Pdf 导出pdf
- Storage 定时存储
- 其他
- BackTop 返回顶部
- NumberScroll 数字动画
- NumberZero 数字前补零
- Spin 局部加载
- Tcplayer 播放器