美文网首页
vue插件countup

vue插件countup

作者: 秀萝卜 | 来源:发表于2021-12-10 16:39 被阅读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));
                            }
                        });
                    });

相关文章

网友评论

      本文标题:vue插件countup

      本文链接:https://www.haomeiwen.com/subject/hwgcfrtx.html