fix countdown异步计算属性无法更新组件 #228

src/packages/countdown/countdown.vue

@@ -119,6 +119,9 @@ const countdownTimer = {
         this.p += (this.getTimeStamp() - this._curr);
         this.$emit('on-restart', this.restTime);
       }
+    },
+    endTime() {
+      this.initTimer();
     }
   },
   methods: {
@@ -127,29 +130,32 @@ const countdownTimer = {
       let t = timeStr;
       t = t > 0? +t: t.toString().replace(/\-/g, '/');
       return new Date(t).getTime();
+    },
+    initTimer() {
+      const delay = 1000;
+      const curr = Date.now();
+      const start = this.getTimeStamp(this.startTime || curr);
+      const end = this.getTimeStamp(this.endTime || curr);
+      const diffTime = curr - start;
+
+      this.restTime = end - (start + diffTime);
+      this.timer = setInterval(() => {
+        if(!this.paused) {
+          let restTime = end - (Date.now() - this.p + diffTime);
+          this.restTime = restTime;
+          if(restTime < delay) {
+            this.restTime = 0;
+            this.$emit('on-end');
+            clearInterval(this.timer);
+          }
+        }else{
+          // 暂停
+        }
+      }, delay);
     }
   },
   created() {
-    const delay = 1000;
-    const curr = Date.now();
-    const start = this.getTimeStamp(this.startTime || curr);
-    const end = this.getTimeStamp(this.endTime || curr);
-    const diffTime = curr - start;
-
-    this.restTime = end - (start + diffTime);
-    this.timer = setInterval(() => {
-      if(!this.paused) {
-        let restTime = end - (Date.now() - this.p + diffTime);
-        this.restTime = restTime;
-        if(restTime < delay) {
-          this.restTime = 0;
-          this.$emit('on-end');
-          clearInterval(this.timer);
-        }
-      }else{
-        // 暂停
-      }
-    }, delay);
+    this.initTimer();
   }
 }
 countdownTimer.restTime = restTime;

src/packages/countdown/demo.vue

@@ -24,6 +24,12 @@
           <nut-countdown slot="title" showDays showPlainText :endTime="end" />
         </nut-cell>
       </div>
+      <h4>异步更新结束时间</h4>
+      <div>
+        <nut-cell>
+          <nut-countdown slot="title" showPlainText :endTime="asyncEnd" />
+        </nut-cell>
+      </div>
       <h4>控制开始和暂停的倒计时</h4>
       <div>
         <nut-cell>
@@ -50,6 +56,7 @@ export default {
     return {
       serverTime: Date.now() - 30 * 1000,
       end: Date.now() + 50 * 1000,
+      asyncEnd: 0,
       paused: false
     };
   },
@@ -66,6 +73,11 @@ export default {
     onrestart(v) {
       console.log('restart: ', v);
     }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.asyncEnd = Date.now() + 30 * 1000
+    }, 3000)
   }
 };
 </script>

src/packages/countdown/doc.md

@@ -41,6 +41,17 @@
 </nut-countdown>
 ```
 
+异步更新结束时间
+
+```html
+<nut-countdown 
+    showDays 
+    showPlainText 
+    :endTime="asyncEnd" 
+>
+</nut-countdown>
+```
+
 控制开始和暂停的倒计时
 
 ```html
@@ -65,7 +76,7 @@
 ## Event
 
 | 字段 | 说明 | 回调参数
-| ----- | ----- | ----- | -----
+| ----- | ----- | ----- 
 | on-end | 倒计时结束时 | 剩余时间戳
 | on-paused | 暂停时 | 剩余时间戳
 | on-restart | 暂停时 | 剩余时间戳