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 |
8. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。