关于vue.js:vue使用vueanimatenumber动态展示数字

49次阅读

共计 814 个字符，预计需要花费 3 分钟才能阅读完成。

1. 开发环境 vue+vue-animate-number
2. 电脑系统 windows10 专业版
3. 在应用 vue 开发的过程中, 咱们常常会应用一些插件来实现一些成果, 上面我来分享一下是如何应用 vue 来实现动静展现数字。
4. 废话不多说, 间接上操作:

// 装置 vue-animate-number 插件
npm install vue-animate-number

5. 在 main.js 中引入

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

6. 在 vue 模板中应用

<animate-number 
from="19999999"
:to="to" 
duration="10000" 
v-if="toshow" 
class="canimate">
</animate-number>

7. 配置参数

prop name	type	description	default	require
mode	string	`auto` or `manual`, trigger animation immediately or not	auto	N
from	number	value, at which animate starts	–	Y
to	number	value, at which animate ends	–	Y
fromColor	string	start color for gradient, in hex format	–	N
toColor	string	end color for gradient, in hex format	–	N
formatter	Function	value formatter for number in every step during the animation	parseInt	N
animateEnd	Function	callback after animation	–	N