vue插件countup

2021-12-10  本文已影响0人  秀萝卜

安装:需要安装两个包,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));
                            }
                        });
                    });
上一篇下一篇

猜你喜欢

热点阅读