vue-count-to 实现数字滚动
效果图:
下载组件:
npm install vue-count-to
或
yarn add vue-count-to
引入组件:
import countTo from 'vue-count-to';
注册组件:
export default {
components:{ countTo }
}
使用组件:
(在需要数字动态增加的位置使用组件)
<!-- startVal开始的数字 endVal结束的数字 duration过渡时间 -->
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
组件配置文档:
Property | Description | type | default |
---|---|---|---|
startVal | 开始值 | Number | 0 |
endVal | 结束值 | Number | 2022 |
duration | 持续时间 | Number | 3000 |
autoplay | 自动播放 | Boolean | true |
decimals | 要显示的小数位数 | Number | 0 |
decimal | 十进制分割 | String | . |
separator | 分隔符 | String | , |
prefix | 前缀 | String | ‘’ |
suffix | 后缀 | String | ‘’ |
useEasing | 使用缓和功能 | Boolean | true |
easingFn | 缓和回调 | Function | — |
功能:
Function Name | Description |
---|---|
mountedCallback | 挂载以后返回回调 |
start | 开始计数 |
pause | 暂停计数 |
reset | 重置CountTo |