浏览代码

fix: 修复 countup 组件异步更新问题

Ymm0008 5 年之前
父节点
当前提交
fa8dfea45c
共有 1 个文件被更改,包括 38 次插入10 次删除
  1. 38 10
      src/packages/countup/countup.vue

+ 38 - 10
src/packages/countup/countup.vue

@@ -165,7 +165,8 @@ export default {
   },
   },
   data() {
   data() {
     return {
     return {
-      current: this.initNum,
+      valFlag: false,
+      current: 0,
       sortFlag: 'add',
       sortFlag: 'add',
       initDigit1: 0,
       initDigit1: 0,
       initDigit2: 0,
       initDigit2: 0,
@@ -195,24 +196,45 @@ export default {
     },
     },
     machinePrizeLevel: function(n, o) {
     machinePrizeLevel: function(n, o) {
       this.prizeLevelTrun = n;
       this.prizeLevelTrun = n;
+    },
+    initNum: function(val, oldVal) {
+      this.current = val;
+      this.valFlag = false;
+      this.valChange();
+    },
+    endNum: function(val, oldVal) {
+      this.current = this.initNum;
+      this.valFlag = false;
+      this.valChange();
     }
     }
   },
   },
   mounted() {
   mounted() {
-    if (this.startFlag) {
-      if (this.scrolling || this.customBgImg) {
-        if (this.type != 'machine') {
-          this.countGo();
-        }
-      } else {
-        this.countChange();
-      }
-    }
+    this.current = this.initNum;
+    this.valChange();
   },
   },
   beforeDestroy() {
   beforeDestroy() {
     clearInterval(this.timer);
     clearInterval(this.timer);
     this.timer = null;
     this.timer = null;
   },
   },
   methods: {
   methods: {
+    // 值变化
+    valChange() {
+      if (this.valFlag) {
+        return false;
+      }
+      if (this.startFlag) {
+        if (this.scrolling || this.customBgImg) {
+          if (this.type != 'machine') {
+            this.countGo();
+          }
+        } else {
+          this.countChange();
+          setTimeout(() => {
+            this.valFlag = true;
+          }, 300);
+        }
+      }
+    },
     // 清空定时器
     // 清空定时器
     clearInterval() {
     clearInterval() {
       clearInterval(this.timer);
       clearInterval(this.timer);
@@ -240,6 +262,7 @@ export default {
             this.current = endNum.toFixed(toFixed);
             this.current = endNum.toFixed(toFixed);
             clearInterval(countTimer);
             clearInterval(countTimer);
             this.$emit('scroll-end');
             this.$emit('scroll-end');
+            this.valFlag = false;
           } else {
           } else {
             this.current = (parseFloat(this.current) - parseFloat(speed)).toFixed(toFixed);
             this.current = (parseFloat(this.current) - parseFloat(speed)).toFixed(toFixed);
           }
           }
@@ -249,6 +272,7 @@ export default {
             this.current = endNum.toFixed(toFixed);
             this.current = endNum.toFixed(toFixed);
             clearInterval(countTimer);
             clearInterval(countTimer);
             this.$emit('scroll-end');
             this.$emit('scroll-end');
+            this.valFlag = false;
           } else {
           } else {
             this.current = (parseFloat(this.current) + parseFloat(speed)).toFixed(toFixed);
             this.current = (parseFloat(this.current) + parseFloat(speed)).toFixed(toFixed);
           }
           }
@@ -382,6 +406,7 @@ export default {
         if (that.totalCount <= 0) {
         if (that.totalCount <= 0) {
           that.clearInterval();
           that.clearInterval();
           this.$emit('scroll-end');
           this.$emit('scroll-end');
+          this.valFlag = false;
         }
         }
       }, that.during);
       }, that.during);
     },
     },
@@ -443,6 +468,7 @@ export default {
         }, that.during);
         }, that.during);
         f.addEventListener('webkitTransitionEnd', () => {
         f.addEventListener('webkitTransitionEnd', () => {
           this.$emit('scroll-end');
           this.$emit('scroll-end');
+          this.valFlag = false;
           setTimeout(() => {
           setTimeout(() => {
             that.relNum = that.calculation(that.relNum, m * that.speed, '+');
             that.relNum = that.calculation(that.relNum, m * that.speed, '+');
           }, that.during);
           }, that.during);
@@ -525,8 +551,10 @@ export default {
               this.finshMachine = 0;
               this.finshMachine = 0;
               if (this.prizeLevelTrun < 0) {
               if (this.prizeLevelTrun < 0) {
                 this.$emit('scroll-end', false);
                 this.$emit('scroll-end', false);
+                this.valFlag = false;
               } else {
               } else {
                 this.$emit('scroll-end', true);
                 this.$emit('scroll-end', true);
+                this.valFlag = false;
               }
               }
             }, 130);
             }, 130);
           }
           }