vue 动态数字效果 vue

效果 vue"/>

vue 动态数字效果 vue

安装 vue-animate-number 插件

npm install vue-animate-number 

（注：是npm、cnpm还是yarn根据具体项目要求）

在 main.js 中引入

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

动态使用

<li class="user_Overview-item" style="color: #00fdfa"><div class="user_Overview_nums allnum "><!-- <dv-digital-flop :config="config" style="width:100%;height:100%;" /> --><animate-number ref="allnum" :from="config.numberOrigin" :to="config.number" mode="manual"></animate-number></div><p>总设备数</p>
</li>data() {return {config: {numberOrigin: 0,number: 0},}}getData() {currentGET("big2").then((res) => {if (res.success) {this.$refs.allnum.reset(this.config.number, res.data.totalNum)this.$refs.allnum.start()this.config = {numberOrigin: this.config.number,number: res.data.totalNum}}}
}

轮询调用getData，可实现数字的动态设置

  //轮询switper() {if (this.timer) {return}let looper = (a) => {this.getData()};this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);},