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);
  },
相关推荐
九酒12 分钟前
性能优化:500w字符编码需要多少时间?
前端·性能优化
AntBlack14 分钟前
别说了别说了 ,Trae 已经在不停优化迭代了
前端·人工智能·后端
曹牧20 分钟前
Java 调用webservice接口输出xml自动转义
java·开发语言·javascript
天天扭码44 分钟前
2025年了,npm 与 pnpm我们该如何选择
前端·javascript·npm
烛阴1 小时前
10个JavaScript编程技巧,助你成为高效开发高手!
前端·javascript
去伪存真1 小时前
ESLint + Husky 如何只扫描发生改动的文件?
前端·eslint
sen_shan1 小时前
Vue3+Vite+TypeScript+Element Plus开发-23.客制Form组件
vue.js
s9123601011 小时前
rust REGEX和lazy_static 和struct 混用
java·前端·javascript
vvilkim1 小时前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
天天扭码1 小时前
在项目中常见的main.js和main.mjs有什么区别,我们该如何选择?
前端·javascript·面试