Merge pull request #714 from AntzyMo/docs/countDown

Docs/countDown
Tencent · Aug 4, 2022 · 4401779 · 4401779
2 parents 40df3bb + 6c17db5
commit 4401779
Show file tree

Hide file tree

Showing 11 changed files with 137 additions and 89 deletions.
diff --git a/src/count-down/README.md b/src/count-down/README.md
@@ -19,45 +19,11 @@ isComponent: true
 
 ### 基础倒计时
 
-动态倒计时间主要有时间数字和时分秒分割组成，尺寸可通过 class 进行控制
+{{ base }}
 
-<img src="https://tdesign.gtimg.com/miniprogram/readme/countdown.png" width="375px" height="50%">
+### 调整尺寸
 
-```html
-<!-- 时分秒毫秒 -->
-<t-count-down time="{{96 * 60 * 1000}}" />
-
-<!-- 带毫秒 -->
-<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="custom-theme"
-  content="slot"
-  time="{{96 * 60 * 1000}}"
-  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>
-```
-
-```js
-onChange(e) {
-  this.setData({
-    timeData: e.detail,
-  });
-},
-```
+{{ sizeCountDown }}
 
 ## API
 ### CountDown Props

diff --git a/src/count-down/_example/base/index.js b/src/count-down/_example/base/index.js
@@ -0,0 +1,5 @@
+Component({
+  data: {
+    time: 96 * 60 * 1000,
+  },
+});
diff --git a/src/count-down/_example/base/index.json b/src/count-down/_example/base/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-count-down": "tdesign-miniprogram/count-down/count-down"
+  }
+}
diff --git a/src/count-down/_example/base/index.wxml b/src/count-down/_example/base/index.wxml
@@ -0,0 +1,29 @@
+<view class="flex base-time">
+  <t-count-down t-class="base-time-cls" time="{{ time }}" />
+  <view class="base-time-text"> 时分秒 </view>
+</view>
+
+<view class="flex base-time">
+  <t-count-down t-class="base-time-cls" format="HH:mm:ss:SSS" time="{{ time }}" millisecond />
+  <view class="base-time-text"> 带毫秒 </view>
+</view>
+
+<view class="flex base-time">
+  <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 content="default" time="{{ time }}" theme="round"> </t-count-down>
+  <view class="base-time-text"> 带圆形底 </view>
+</view>
+
+<view class="flex base-time">
+  <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 content="default" time="{{ time }}" splitWithUnit theme="highlight" />
+  <view class="base-time-text"> 无底色带单位 </view>
+</view>
diff --git a/src/count-down/_example/base/index.wxss b/src/count-down/_example/base/index.wxss
@@ -0,0 +1,20 @@
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.base-time {
+  margin-top: 52rpx;
+  justify-content: space-between;
+}
+
+.base-time-text {
+  font-size: 20rpx;
+  color: rgba(0, 0, 0, 0.4);
+  width: 60%;
+}
+
+.base-time-cls {
+  color: #333;
+  font-weight: 700;
+}
diff --git a/src/count-down/_example/count-down.json b/src/count-down/_example/count-down.json
@@ -2,6 +2,8 @@
   "navigationBarTitleText": "count-down 倒计时",
   "navigationBarBackgroundColor": "#fff",
   "usingComponents": {
-    "t-demo": "../../components/demo-block/index"
+    "t-demo": "../../components/demo-block/index",
+    "base": "./base",
+    "sizeCountDown": "./sizeCountDown"
   }
 }
diff --git a/src/count-down/_example/count-down.wxml b/src/count-down/_example/count-down.wxml
@@ -2,57 +2,9 @@
 <view class="demo-desc">用于实时展示倒计时数值。</view>
 
 <t-demo padding title="01 类型" desc="动态倒计时间主要有时间数字和时分秒分割组成">
-  <view class="flex base-time">
-    <t-count-down t-class="base-time-cls" time="{{ time }}" />
-    <view class="base-time-text"> 时分秒 </view>
-  </view>
-  <view class="flex base-time">
-    <t-count-down t-class="base-time-cls" format="HH:mm:ss:SSS" time="{{ time }}" millisecond />
-    <view class="base-time-text"> 带毫秒 </view>
-  </view>
-  <view class="flex base-time">
-    <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 content="default" time="{{ time }}" theme="round"> </t-count-down>
-    <view class="base-time-text"> 带圆形底 </view>
-  </view>
-  <view class="flex base-time">
-    <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 content="default" time="{{ time }}" splitWithUnit theme="highlight" />
-    <view class="base-time-text"> 无底色带单位 </view>
-  </view>
+  <base />
 </t-demo>
+
 <t-demo padding title="02 规格" desc="动倒计时带底色和无底色各尺寸规格">
-  <view class="flex spec-item">
-    <view class="spec-item-left">
-      <t-count-down content="default" time="{{ time }}" theme="square" />
-    </view>
-    <view class="spec-item-right">
-      <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 content="default" time="{{ time }}" theme="square" size="middle" />
-    </view>
-    <view class="spec-item-right">
-      <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 content="default" time="{{ time }}" theme="square" size="large"> </t-count-down>
-    </view>
-    <view class="spec-item-right">
-      <t-count-down size="large" time="{{ time }}" />
-    </view>
-    <view class="spec-item-after"> L </view>
-  </view>
+  <sizeCountDown />
 </t-demo>
diff --git a/src/count-down/_example/sizeCountDown/index.js b/src/count-down/_example/sizeCountDown/index.js
@@ -0,0 +1,5 @@
+Component({
+  data: {
+    time: 96 * 60 * 1000,
+  },
+});
diff --git a/src/count-down/_example/sizeCountDown/index.json b/src/count-down/_example/sizeCountDown/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-count-down": "tdesign-miniprogram/count-down/count-down"
+  }
+}
diff --git a/src/count-down/_example/sizeCountDown/index.wxml b/src/count-down/_example/sizeCountDown/index.wxml
@@ -0,0 +1,27 @@
+<view class="flex spec-item">
+  <view class="spec-item-left">
+    <t-count-down content="default" time="{{ time }}" theme="square" />
+  </view>
+  <view class="spec-item-right">
+    <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 content="default" time="{{ time }}" theme="square" size="middle" />
+  </view>
+  <view class="spec-item-right">
+    <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 content="default" time="{{ time }}" theme="square" size="large"> </t-count-down>
+  </view>
+  <view class="spec-item-right">
+    <t-count-down size="large" time="{{ time }}" />
+  </view>
+  <view class="spec-item-after"> L </view>
+</view>
diff --git a/src/count-down/_example/sizeCountDown/index.wxss b/src/count-down/_example/sizeCountDown/index.wxss
@@ -0,0 +1,30 @@
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.spec-item {
+  justify-content: space-between;
+  margin-top: 32rpx;
+}
+
+.spec-item-right {
+  width: 118 * 2rpx;
+}
+
+.spec-item-left {
+  width: 176 * 2rpx;
+}
+
+.spec-item-after {
+  font-size: 20rpx;
+  color: rgba(0, 0, 0, 0.4);
+  justify-content: center;
+  display: inline-flex;
+  align-items: center;
+  width: 30%;
+}
+
+.last-padding {
+  padding-bottom: 80rpx;
+}