数字动画插件countUp.js的问题总结，每个组件唯一的uid值作为动画插件的id渲染

大家好，下面分享一下本人使用countUp.js动画插件遇到的问题。
因为数字累加器countUp是根据id来渲染的，需要保证每个组件的id值都不一样，所以使用了唯一_uid值来区分每个组件。

vue版本：2.5.17

源代码相关链接：https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js

     <div>
       <span :id="'myCount'+myCountId"></span>
     </div>
     <script>
     ...
     data() {
       myCountId: this._uid // vue2特有属性，每个组件都有一个唯一的id，可用于区分每个组件，这里使用_uid作为countUp组件的id值，全局使用多个countUp组件互不影响。
     },
     mounted() {
       console.log(this._uid, "打印当前组件的_uid值");
       this.nextTick(() => {
		 this.countInit();
	   })
	 },
     methods: {
        countInit() {
	        var options = {
		        useEasing : true, // 是否启用缓动效果
		        useGrouping : true, // 是否启用千分位分组
		        prefix : '', // 前缀
		        suffix : '', // 后缀
		        decimal : '.', // 小数点
		        separator : ',' // 千位分隔符
		    };
		    let myCountUp = new CountUp('countUp', 
		       0, // 起始值
		       12345, // 结束值
		       2, // 小数点位数
		       1, // 动画持续时间（秒）
		       options // 自定义的CountUp.js配置
		     ); // countUp 参数解释
		     if (myCountUp?.error) {
		        console.error(myCountUp.error);
	         } else {
	            myCountUp.start(); // 开始数字动画
	         }
	    }
     }
     </script>
  

最后，原创不易，如本文对您有所帮助，麻烦点个赞收藏谢谢！