请添加图片描述

 

1 安装插件
npm install vue-animate-number

2 在main.js中引入

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


3使用:

1.在 `data` 中定义动态展示的数字。

2.在 `created` 钩子函数中,使用 `setInterval` 定时器来更新数字的值。

3.在 `beforeDestroy` 钩子函数中清除定时器。

示例代码如下:

<animate-number from="1" :to="entryRod" :key="entryRod"></animate-number>

data(){
        return{
         entryRod: '500',
         rodNumber:null,
        }
    }
  created() {
    //数字定时器动态循环设置
    this.rodNumber = setInterval(() => {
      this.entryRod++;
    }, 5000); // 每隔 1 秒更新数字的值
  },

 beforeDestroy() {
    clearInterval(this.rodNumber); // 在组件销毁前清除定时器
  },

备注:1.在animate-number中,建议加上:key,这样可以适应toNum的动态变化;

我们在 `created` 钩子函数中使用 `setInterval` 定时器更新数字的值。在每次定时器执行时,通过 `this.number++` 操作来更新数字的值,在模板中使用 `entryRod` 将其动态展示出来。在 `beforeDestroy` 钩子函数中通过 `clearInterval` 方法来清除定时器,以避免内存泄漏的问题。

 

 

Logo

前往低代码交流专区

更多推荐