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

安装 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);
  },
相关推荐
LaoZhangAI32 分钟前
Claude MCP模型上下文协议详解:AI与外部世界交互的革命性突破【2025最新指南】
前端
LaoZhangAI33 分钟前
2025最全Cursor MCP实用指南:15个高效工具彻底提升AI编程体验【实战攻略】
前端
Kagerou1 小时前
vue3基础知识(结合TypeScript)
前端
市民中心的蟋蟀1 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭1 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试
carterwu1 小时前
各个大厂是怎么实现组件库和相应扩展的?基础组件、区块、页面
前端
Face1 小时前
promise 规范应用
前端
Mintopia1 小时前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face1 小时前
事件循环
前端·javascript
ONE_Gua1 小时前
chromium魔改——navigator.webdriver 检测
前端·后端·爬虫