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

Li_Ning212023-10-19 10:38

安装 vue-animate-number 插件

js 复制代码

npm install vue-animate-number

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

在 main.js 中引入

js 复制代码

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

动态使用

js 复制代码

<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，可实现数字的动态设置

js 复制代码

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