feat(CountDown): update slot (#2143)

example/pages/count-down/index.wxml

@@ -19,7 +19,7 @@
 
 <demo-block title="自定义样式">
   <van-count-down
-    useCustom
+    use-slot
     time="{{ time }}"
     bind:change="onChange"
   >

example/pages/count-down/index.wxss

@@ -12,4 +12,3 @@
   background-color: #1989fa;
   border-radius: 2px;
 }
-

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 格式
 

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)
       });

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>