From b9f52933ffe7db82ed8511a446e54ce23a42e2f1 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 11 Oct 2019 20:52:10 +0800
Subject: [PATCH] feat(CountDown): update slot (#2143)

---
 example/pages/count-down/index.wxml |  2 +-
 example/pages/count-down/index.wxss |  1 -
 packages/count-down/README.md       |  8 +++----
 packages/count-down/index.ts        | 34 +++++++++++++++--------------
 packages/count-down/index.wxml      | 15 +++----------
 5 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/example/pages/count-down/index.wxml b/example/pages/count-down/index.wxml
index d980b3be..accf9e9d 100644
--- a/example/pages/count-down/index.wxml
+++ b/example/pages/count-down/index.wxml
@@ -19,7 +19,7 @@
 
 <demo-block title="自定义样式">
   <van-count-down
-    useCustom
+    use-slot
     time="{{ time }}"
     bind:change="onChange"
   >
diff --git a/example/pages/count-down/index.wxss b/example/pages/count-down/index.wxss
index ca7b0866..e02e2320 100644
--- a/example/pages/count-down/index.wxss
+++ b/example/pages/count-down/index.wxss
@@ -12,4 +12,3 @@
   background-color: #1989fa;
   border-radius: 2px;
 }
-
diff --git a/packages/count-down/README.md b/packages/count-down/README.md
index 8566b1da..1c39904f 100644
--- a/packages/count-down/README.md
+++ b/packages/count-down/README.md
@@ -53,11 +53,11 @@ Page({
 
 ### 自定义样式
 
-通过`bind:change`事件获取`timeData`对象，格式见下方表格
+设置`use-slot`属性后可以自定义倒计时样式，需要通过`bind:change`事件获取`timeData`对象并自行渲染，格式见下方表格
 
 ```html
 <van-count-down
-  useCustom
+  use-slot
   time="{{ time }}"
   bind:change="onChange"
 >
@@ -150,14 +150,14 @@ Page({
 | format | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | *string* | `HH:mm:ss` | - |
 | auto-start | 是否自动开始倒计时 | *boolean* | `true` | - |
 | millisecond | 是否开启毫秒级渲染 | *boolean* | `false` | - |
-| useCustom | 是否自定义样式 | *boolean* | `false` | - |
+| use-slot | 是否使用自定义样式插槽 | *boolean* | `false` | - |
 
 ### Events
 
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
-| change | 时间变化时触发 | timeData |
 | finish | 倒计时结束时触发 | - |
+| change | 时间变化时触发，仅在开启`use-slot`后才会触发 | timeData |
 
 ### timeData 格式
 
diff --git a/packages/count-down/index.ts b/packages/count-down/index.ts
index 11a7638a..1b185a68 100644
--- a/packages/count-down/index.ts
+++ b/packages/count-down/index.ts
@@ -1,28 +1,26 @@
 import { VantComponent } from '../common/component';
 import { isSameSecond, parseFormat, parseTimeData } from './utils';
 
+function simpleTick(fn: Function) {
+  return setTimeout(fn, 30);
+}
+
 VantComponent({
   props: {
+    useSlot: Boolean,
+    millisecond: Boolean,
     time: {
       type: Number,
-      observer: 'reset',
+      observer: 'reset'
     },
     format: {
       type: String,
       value: 'HH:mm:ss'
     },
-    useCustom: {
-      type: Boolean,
-      value: false,
-    },
     autoStart: {
       type: Boolean,
-      value: true,
-    },
-    millisecond: {
-      type: Boolean,
-      value: false,
-    },
+      value: true
+    }
   },
 
   data: {
@@ -68,17 +66,17 @@ VantComponent({
     },
 
     microTick() {
-      this.tid = setTimeout(() => {
+      this.tid = simpleTick(() => {
         this.setRemain(this.getRemain());
 
         if (this.remain !== 0) {
           this.microTick();
         }
-      }, 100);
+      });
     },
 
     macroTick() {
-      this.tid = setTimeout(() => {
+      this.tid = simpleTick(() => {
         const remain = this.getRemain();
 
         if (!isSameSecond(remain, this.remain) || remain === 0) {
@@ -88,7 +86,7 @@ VantComponent({
         if (this.remain !== 0) {
           this.macroTick();
         }
-      }, 1000);
+      });
     },
 
     getRemain() {
@@ -98,7 +96,11 @@ VantComponent({
     setRemain(remain) {
       this.remain = remain;
       const timeData = parseTimeData(remain);
-      this.$emit('change', timeData);
+
+      if (this.data.useSlot) {
+        this.$emit('change', timeData);
+      }
+
       this.setData({
         formattedTime: parseFormat(this.data.format, timeData)
       });
diff --git a/packages/count-down/index.wxml b/packages/count-down/index.wxml
index ab6461d9..e206e167 100644
--- a/packages/count-down/index.wxml
+++ b/packages/count-down/index.wxml
@@ -1,13 +1,4 @@
-<view
-  wx:if="{{ useCustom }}"
-  class="van-count-down"
->
-  <slot/>
-</view>
-
-<view
-  wx:else
-  class="van-count-down"
->
-  {{ formattedTime }}
+<view class="van-count-down">
+  <slot wx:if="{{ useSlot }}"/>
+  <block wx:else>{{ formattedTime }}</block>
 </view>