vue-animate-number数字滚动插件的使用

2021-07-13   阅读:3973   类型:前端   分类:Vue    标签: Vue

vue中加一些加载效果用户体验会更好。所以用了vue-animate-number 这一款插件,介绍给大家

GIF.gif

1、安装vue-animate-number插件

npm install vue-animate-number

2、引入插件,在main.js中引入

import VueAnimateNumber from 'vue-animate-number' 
Vue.use(VueAnimateNumber)

3、使用方法

<animate-number from="0" :to="20" duration="1000"></animate-number>

4、案例

<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6" class="count_item">
                <div class="grid-content bg-purple bg-purple-primary">
                    <div class="count_item_left"><i class="iconfont icon-wenzhangguanli"></i></div>
                        <h2><animate-number from="0" :to="20" duration="1000"></animate-number><span>文章</span></h2>
                </div>
            </el-col>
            <el-col :span="6" class="count_item">
                <div class="grid-content bg-purple bg-purple-danger">
                    <div class="count_item_left"><i class="iconfont icon-riji"></i></div>
                        <h2><animate-number from="0" :to="20" duration="1000"></animate-number><span>日记</span></h2>
                </div>
            </el-col>
		</el-row>
	</div>
</template>
腾讯云11.11上云拼团Go,2核2G3M云服务器 28元/年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/735.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×