探索Vue中神奇组件‘vue-count-to‘的魅力

项目中如遇到数字慢慢增长的动态效果的需求，该组件即可解决

首先看效果👀

使用✍

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

写在最后🔚

        如果您有任何问题、建议或反馈，欢迎在评论区留言📝，非常愿意听取您的声音。感谢您的阅读，期待与您在未来的博客分享中再次相会🥳！