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

Li_Ning21

已于 2023-10-26 11:16:14 修改

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2023-10-18 19:03:43 首次发布

本文链接：https://blog.youkuaiyun.com/Li_Ning21/article/details/133912423

本文介绍了如何在Vue项目中安装并使用vue-animate-number插件，展示了如何动态设置数字值，以及通过轮询实现数字的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装 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);
  },