vue 动态数字效果 vue-animate-number

安装 vue-animate-number 插件

npm install vue-animate-number 
1

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

在 main.js 中引入

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

动态使用

<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
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

  //轮询
  switper() {
      if (this.timer) {
          return
      }
      let looper = (a) => {
          this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
  },
1
2
3
4
5
6
7
8
9
10

感觉有用的话，可以打赏一把么？一毛不嫌少，十块不嫌多