美文网首页
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