Merge pull request #172 from Tencent/fix/countdown/style

refactor(countdown): add new property and complete default style
Tencent · Feb 15, 2022 · bd23458 · bd23458
2 parents cd3ffe2 + a8275ae
commit bd23458
Show file tree

Hide file tree

Showing 8 changed files with 227 additions and 255 deletions.
diff --git a/example/pages/count-down/count-down.less b/example/pages/count-down/count-down.less
@@ -1,15 +1,3 @@
-// .item {
-//   display: inline-block;
-//   width: 22px;
-//   margin-right: 5px;
-//   color: #fff;
-//   font-size: 12px;
-//   text-align: center;
-//   background-color: #1989fa;
-//   border-radius: 2px;
-// }
-
-@red: #e34d59;
 @gray: rgba(0, 0, 0, .4);
 
 page {
@@ -37,85 +25,6 @@ page {
   }
 }
 
-.base-time-square {
-  .item {
-    width: 40rpx;
-    height: 40rpx;
-    background: @red;
-    border-radius: 4px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    font-size: 24rpx;
-  }
-
-  .item-dot {
-    color: @red;
-    height: 40rpx;
-    display: inline-flex;
-    align-items: center;
-    margin: 0 8rpx;
-    font-size: 28rpx;
-    font-weight: 600;
-  }
-
-  .item-text {
-    color: #333;
-    height: 40rpx;
-    display: inline-flex;
-    align-items: center;
-    margin: 0 10rpx;
-    font-size: 20rpx;
-  }
-}
-
-.base-time-circle {
-  .item {
-    width: 40rpx;
-    height: 40rpx;
-    background: @red;
-    border-radius: 50%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    font-size: 24rpx;
-  }
-
-  .item-dot {
-    color: @red;
-    height: 40rpx;
-    display: inline-flex;
-    align-items: center;
-    margin: 0 8rpx;
-    font-size: 28rpx;
-    font-weight: 600;
-  }
-}
-
-.base-time-trans {
-  .item {
-    width: 40rpx;
-    height: 48rpx;
-    color: @red;
-    border-radius: 4px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24rpx;
-  }
-
-  .item-text {
-    color: #333;
-    height: 48rpx;
-    display: inline-flex;
-    align-items: center;
-    margin: 0 6rpx;
-    font-size: 20rpx;
-  }
-}
-
 .spec-item {
   justify-content: space-between;
   margin-top: 32rpx;
@@ -138,64 +47,6 @@ page {
   }
 }
 
-.base-time-square-l {
-  .item {
-    width: 56rpx;
-    height: 56rpx;
-    background: @red;
-    border-radius: 4px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    font-size: 32rpx;
-  }
-
-  .item-dot {
-    color: @red;
-    height: 56rpx;
-    display: inline-flex;
-    align-items: center;
-    margin: 0 8rpx;
-    font-size: 36rpx;
-    font-weight: 600;
-  }
-}
-
-.base-time-square-m {
-  .item {
-    width: 48rpx;
-    height: 48rpx;
-    background: @red;
-    border-radius: 4px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    font-size: 28rpx;
-  }
-
-  .item-dot {
-    color: @red;
-    height: 48rpx;
-    display: inline-flex;
-    align-items: center;
-    margin: 0 8rpx;
-    font-size: 32rpx;
-    font-weight: 600;
-  }
-}
-
-.t-count-down {
-  &--middle {
-    font-size: 32rpx !important;
-  }
-
-  &--large {
-    font-size: 36rpx !important;
-  }
-}
-
 .last-padding {
   padding-bottom: 80rpx;
 }
diff --git a/example/pages/count-down/count-down.wxml b/example/pages/count-down/count-down.wxml
@@ -11,121 +11,47 @@
     <view class="base-time-text"> 带毫秒 </view>
   </view>
   <view class="flex base-time">
-    <t-count-down
-      t-class="base-time-square"
-      content="slot"
-      time="{{ time }}"
-      bind:change="onChange"
-    >
-      <text class="item">{{ timeData.hours }}</text>
-      <text class="item-dot">:</text>
-      <text class="item">{{ timeData.minutes }}</text>
-      <text class="item-dot">:</text>
-      <text class="item">{{ timeData.seconds }}</text>
-    </t-count-down>
+    <t-count-down content="default" time="{{ time }}" theme="square"> </t-count-down>
     <view class="base-time-text"> 带方形底 </view>
   </view>
   <view class="flex base-time">
-    <t-count-down
-      t-class="base-time-circle"
-      content="slot"
-      time="{{ time }}"
-      bind:change="onChange"
-    >
-      <text class="item">{{ timeData.hours }}</text>
-      <text class="item-dot">:</text>
-      <text class="item">{{ timeData.minutes }}</text>
-      <text class="item-dot">:</text>
-      <text class="item">{{ timeData.seconds }}</text>
-    </t-count-down>
+    <t-count-down content="default" time="{{ time }}" theme="round"> </t-count-down>
     <view class="base-time-text"> 带圆形底 </view>
   </view>
   <view class="flex base-time">
-    <t-count-down
-      t-class="base-time-square"
-      content="slot"
-      time="{{ time }}"
-      bind:change="onChange"
-    >
-      <text class="item">{{ timeData.hours }}</text>
-      <text class="item-text">时</text>
-      <text class="item">{{ timeData.minutes }}</text>
-      <text class="item-text">分</text>
-      <text class="item">{{ timeData.seconds }}</text>
-      <text class="item-text">秒</text>
-    </t-count-down>
+    <t-count-down content="default" time="{{ time }}" splitWithUnit theme="round" />
     <view class="base-time-text"> 带单位 </view>
   </view>
   <view class="flex base-time">
-    <t-count-down t-class="base-time-trans" content="slot" time="{{ time }}" bind:change="onChange">
-      <text class="item">{{ timeData.hours }}</text>
-      <text class="item-text">时</text>
-      <text class="item">{{ timeData.minutes }}</text>
-      <text class="item-text">分</text>
-      <text class="item">{{ timeData.seconds }}</text>
-      <text class="item-text">秒</text>
-    </t-count-down>
+    <t-count-down content="default" time="{{ time }}" splitWithUnit theme="highlight" />
     <view class="base-time-text"> 无底色带单位 </view>
   </view>
 </t-demo>
 <t-demo padding title="02 规格" desc="动倒计时带底色和无底色各尺寸规格">
   <view class="flex spec-item">
     <view class="spec-item-left">
-      <t-count-down
-        t-class="base-time-square"
-        content="slot"
-        time="{{ time }}"
-        bind:change="onChange"
-      >
-        <text class="item">{{ timeData.hours }}</text>
-        <text class="item-dot">:</text>
-        <text class="item">{{ timeData.minutes }}</text>
-        <text class="item-dot">:</text>
-        <text class="item">{{ timeData.seconds }}</text>
-      </t-count-down>
+      <t-count-down content="default" time="{{ time }}" theme="square" />
     </view>
     <view class="spec-item-right">
-      <t-count-down t-class="base-time-cls" time="{{ time }}" />
+      <t-count-down time="{{ time }}" />
     </view>
     <view class="spec-item-after"> S </view>
   </view>
   <view class="flex spec-item">
     <view class="spec-item-left">
-      <t-count-down
-        t-class="base-time-square-m t-count-down--middle"
-        content="slot"
-        time="{{ time }}"
-        bind:change="onChange"
-      >
-        <text class="item">{{ timeData.hours }}</text>
-        <text class="item-dot">:</text>
-        <text class="item">{{ timeData.minutes }}</text>
-        <text class="item-dot">:</text>
-        <text class="item">{{ timeData.seconds }}</text>
-      </t-count-down>
+      <t-count-down content="default" time="{{ time }}" theme="square" size="middle" />
     </view>
     <view class="spec-item-right">
-      <t-count-down t-class="base-time-cls t-count-down--middle" time="{{ time }}" />
+      <t-count-down size="middle" time="{{ time }}" />
     </view>
     <view class="spec-item-after"> M </view>
   </view>
   <view class="flex spec-item last-padding">
     <view class="spec-item-left">
-      <t-count-down
-        t-class="base-time-square-l t-count-down--large"
-        content="slot"
-        time="{{ time }}"
-        bind:change="onChange"
-      >
-        <text class="item">{{ timeData.hours }}</text>
-        <text class="item-dot">:</text>
-        <text class="item">{{ timeData.minutes }}</text>
-        <text class="item-dot">:</text>
-        <text class="item">{{ timeData.seconds }}</text>
-      </t-count-down>
+      <t-count-down content="default" time="{{ time }}" theme="square" size="large"> </t-count-down>
     </view>
     <view class="spec-item-right">
-      <t-count-down t-class="base-time-cls t-count-down--large" time="{{ time }}" />
+      <t-count-down size="large" time="{{ time }}" />
     </view>
     <view class="spec-item-after"> L </view>
   </view>

diff --git a/src/count-down/README.md b/src/count-down/README.md
@@ -25,14 +25,20 @@ isComponent: true
 
 ```html
 <!-- 时分秒毫秒 -->
-<t-count-down t-class="base-time-cls" time="{{96 * 60 * 1000}}" />
+<t-count-down time="{{96 * 60 * 1000}}" />
 
 <!-- 带毫秒 -->
-<t-count-down t-class="base-time-cls" format="HH:mm:ss:SSS" time="{{96 * 60 * 1000}}" millisecond />
+<t-count-down format="HH:mm:ss:SSS" time="{{96 * 60 * 1000}}" millisecond />
 
 <!-- 带方形底 -->
+<t-count-down content="default" time="{{96 * 60 * 1000}}" theme="square" />
+
+<!-- Large 带方形底 -->
+<t-count-down content="default" time="{{96 * 60 * 1000}}" theme="square" size="large" />
+
+<!-- 自定义内容 -->
 <t-count-down
-  t-class="base-time-square"
+  t-class="custom-theme"
   content="slot"
   time="{{96 * 60 * 1000}}"
   bind:change="onChange"
@@ -54,20 +60,22 @@ onChange(e) {
 ```
 
 ## API
-
 ### CountDown Props
 
-| 名称        | 类型          | 默认值    | 说明                                                                        | 必传 |
-| ----------- | ------------- | --------- | --------------------------------------------------------------------------- | ---- |
-| auto-start  | Boolean       | true      | 是否自动开始倒计时                                                          | N    |
-| content     | String / Slot | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽 | N    |
-| format      | String        | HH:mm:ss  | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒                              | N    |
-| millisecond | Boolean       | false     | 是否开启毫秒级渲染                                                          | N    |
-| time        | Number        | -         | 必需。倒计时时长，单位毫秒                                                  | Y    |
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+auto-start | Boolean | true | 是否自动开始倒计时 | N
+content | String / Slot | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽 | N
+format | String | HH:mm:ss | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | N
+millisecond | Boolean | false | 是否开启毫秒级渲染 | N
+size | String | 'small' | 倒计时尺寸。可选项：small/medium/large `v0.5.1` | N
+split-with-unit | Boolean | false | 使用时间单位分割 `v0.5.1` | N
+theme | String | 'default' | 倒计时风格。可选项：default/round/square `v0.5.1` | N
+time | Number | - | 必需。倒计时时长，单位毫秒 | Y
 
 ### CountDown Events
 
-| 名称   | 参数               | 描述                                                                                                                    |
-| ------ | ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
-| change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/count-down/type.ts) |
-| finish | -                  | 倒计时结束时触发                                                                                                        |
+名称 | 参数 | 描述
+-- | -- | --
+change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
+finish | - | 倒计时结束时触发