解决倒计时组件及示例时间不会重置的问题

examples/hello-uniapp/components/graceCountd.vue

@@ -34,6 +34,7 @@ export default {
 	},
 	data() {
 		return {
+            setTime:null,
 			h: '00',
 			i: '00',
 			s: '00',
@@ -62,9 +63,12 @@ export default {
 			this.setInterValFunc(this);
 		}
 	},
+    beforeDestroy(){
+        clearInterval(this.setTime)
+    },
 	methods: {
 		setInterValFunc:function(obj){
-			setInterval(function(){ obj.countDown(obj);}, 1000);
+			this.setTime = setInterval(function(){ obj.countDown(obj);}, 1000);
 		},
 		countDown: function (self){
 			var leftTime = self.leftTime - new Date();

examples/hello-uniapp/pages/template/countdown/countdown.vue

@@ -17,14 +17,25 @@
 </template>
 <script>
 	import graceCountd from "../../../components/graceCountd.vue";
-	//模拟3个时间
+	export default {
+		data() {
 			var dateObj = new Date();
 			var currentTime = dateObj.getTime();
-	var timer1 = formatDateTime((currentTime + 1000 * 2000));
-	var timer2 = formatDateTime((currentTime + 1000 * 3000));
-	var timer3 = formatDateTime((currentTime + 1000 * 5000));
-	//时间戳 转 YY-mm-dd HH:ii:ss 
-	function formatDateTime(inputTime){
+			var timer1 = this.formatDateTime((currentTime + 1000 * 2000));
+			var timer2 = this.formatDateTime((currentTime + 1000 * 3000));
+			var timer3 = this.formatDateTime((currentTime + 1000 * 5000));
+			return {
+				title: '倒计时',
+				timer1: timer1,
+				timer2: timer2,
+				timer3: timer3
+			}
+		},
+		components: {
+			graceCountd
+		},
+		methods: {
+			formatDateTime(inputTime) { //时间戳 转 YY-mm-dd HH:ii:ss 
 				var date = new Date(inputTime);
 				var y = date.getFullYear();
 				var m = date.getMonth() + 1;
@@ -38,25 +49,41 @@
 				minute = minute < 10 ? ('0' + minute) : minute;
 				second = second < 10 ? ('0' + second) : second;
 				return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
-	};
-	export default {
-	data(){
-		return {
-			title : '倒计时',
-			timer1 : timer1, 
-			timer2 : timer2, 
-			timer3 : timer3
 			}
 		},
-	components:{
-		graceCountd
 	}
-}
 </script>
 
 <style>
-view{display:flex; width:100%; flex-wrap:wrap; justify-content:center;}
-.uni-countdown{padding:2rpx 0; flex-wrap:nowrap; justify-content:center;}
-.uni-countdown-splitor{width:auto !important; justify-content:center; line-height:44upx; padding:0 5upx;}
-.uni-countdown-numbers{line-height:44upx; width:auto !important; padding:0 10upx; justify-content:center; height:44upx; border-radius:8upx; margin:0 5upx; border:1px solid #000000; font-size:22upx;}
+	view {
+		display: flex;
+		width: 100%;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
+	.uni-countdown {
+		padding: 2rpx 0;
+		flex-wrap: nowrap;
+		justify-content: center;
+	}
+
+	.uni-countdown-splitor {
+		width: auto !important;
+		justify-content: center;
+		line-height: 44upx;
+		padding: 0 5upx;
+	}
+
+	.uni-countdown-numbers {
+		line-height: 44upx;
+		width: auto !important;
+		padding: 0 10upx;
+		justify-content: center;
+		height: 44upx;
+		border-radius: 8upx;
+		margin: 0 5upx;
+		border: 1px solid #000000;
+		font-size: 22upx;
+	}
 </style>