安装:需要安装两个包,vue-countup-v2依赖countup.js包。
npm install --save countup.js vue-countup-v2
快速入门:
import ICountUp from 'vue-countup-v2'
data() {
return {
options: {
duration: 2,
useEasing: false,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '',
suffix: ''
},
}
},
<i-count-up class="counter-value" :endVal="17" :delay="0" :options="options"></i-count-up>
// 引入组件
components: {
ICountUp,
},
补充说明:
i-count-up等同于span标签
参考资料:
https://blog.csdn.net/weixin_43810973/article/details/106303808
如果是jquery,手撸的如下:
<span class="counter-value">300</span>
<span class="counter-value">20</span>
$('.counter-value').each(function(){
$(this).prop('Counter',0).animate({
Counter: $(this).text()
},{
duration: 1500,
easing: 'swing',
step: function (now){
$(this).text(Math.ceil(now));
}
});
});
网友评论