vue中加一些加载效果用户体验会更好。所以用了vue-animate-number 这一款插件，介绍给大家
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>
关于简忆
简忆诞生的故事
粤ICP备16092285号
文章评论（0）