项目中如遇到数字慢慢增长的动态效果的需求,该组件即可解决
首先看效果👀
使用✍
npm install vue-count-to
//引入组件库
import countTo from 'vue-count-to'
//全局注册
Vue.component('count-to', countTo)
//局部注册
components : { countTo }
demo📝
<count-to
ref="example"
:start-val="startVal"
:end-val="endVal"
:duration="duration"
:decimals="decimals"
:separator="separator"
:prefix="prefix"
:suffix="suffix"
:autoplay="false"
class="example"
/>
options🔰
属性 | 描述 | 类型 | 默认值 |
startVal | the value you want to begin at(开始值) | Number | 0 |
endVal | the value you want to arrive at(结束值) | Number | 2017 |
duration | duration in millisecond(动画时间) | Number | 3000 |
autoplay | when mounted autoplay(是否自动播放) | Boolean | true |
decimals | the number of decimal places to show(小数点位数) | Number | 0 |
decimal | the split decimal(小数分割) | String | . |
separator | the separator(分隔符) | String | , |
prefix | the prefix(前缀) | String | '' |
suffix | the suffix(后缀) | String | '' |
useEasing | is use easing function(是否适应easing函数) | Boolean | true |
easingFn | the easing function | Function | — |
说明📌:当设置 autoplay 属性时,startVal、endVal值改变时会自动启动
Functions💻
Function Name | Description |
mountedCallback | when mounted will emit mountedCallback |
start | start the countTo |
pause | pause the countTo |
reset | reset the countTo |
写在最后🔚
如果您有任何问题、建议或反馈,欢迎在评论区留言📝,非常愿意听取您的声音。感谢您的阅读,期待与您在未来的博客分享中再次相会🥳!