ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
## 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 | 开始动画 | 无 |