vue animate-number 数字动态效果

最新推荐文章于 2024-08-16 07:45:00 发布

田野啸风

最新推荐文章于 2024-08-16 07:45:00 发布

阅读量4.5k

点赞数 1

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44439675/article/details/121117468

版权

VUE 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

一、环境配置

1.终端执行：

npm install vue-animate-number

2.在main.js中：

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

二、核心代码：

1.页面：

<animate-number ref="reNum" from="0" :to="toNum" :key="toNum" duration="2000"></animate-number>

2.data:

toNum: "2021",

3.methods:

   this.$nextTick(() => {
     this.$refs.reNum.start()
   })

三、备注：

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

2.不加this.$nextTick的话，在初次打开弹窗（el-dialog）使用animate-number，控制台会有如下报错：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘start’)”

在这里插入图片描述
分析原因：

页面初始化的时候，组件animate-number未加载完成即执行了this.$refs.reNum.start()，故报了找不到start()的错误；
后续再点击弹窗打开时，由于已加载完成，可以找到start()方法，故上图报错仅出现一次。

四、例子：

动态数字效果案例: https://wangdahoo.github.io/vue-animate-number
vue-animate-number插件git地址: https://github.com/wangdahoo/vue-animate-number

<template>
  <div>
    <animate-number
      from="1" 
      to="10" 
      duration="1000" 
      easing="easeOutQuad"
      :formatter="formatter"
    ></animate-number>

    <!-- parseInt as default formatter -->
    <animate-number from="1" to="10"></animate-number>
    
    <!-- manually start animation by click -->
    <animate-number ref="myNum" from="0" to="10" mode="manual" :formatter="formatter"></animate-number><br>
    
    <button type="button" @click="startAnimate()"> animate! </button>
  </div>
</template>

<script>
  export default {
    methods: {
      formatter: function (num) {
        return num.toFixed(2)
      },

      startAnimate: function () {
        this.$refs.myNum.start()
      }
    }
  }
</script>

五、参考资料：
在这里插入图片描述

1.https://blog.csdn.net/qq_42540989/article/details/107410050
2. https://www.h5w3.com/147463.html
3.https://blog.csdn.net/qq_44182284/article/details/106673809?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_title~default-0.no_search_link&spm=1001.2101.3001.4242.1
4.https://github.com/wangdahoo/vue-animate-number