Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(countdown): add new property and complete default style #172

Merged
merged 1 commit into from Feb 15, 2022
Merged

refactor(countdown): add new property and complete default style #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
149 changes: 0 additions & 149 deletions example/pages/count-down/count-down.less
View file
Open in desktop
@@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
94 changes: 10 additions & 84 deletions example/pages/count-down/count-down.wxml
View file
Open in desktop
Expand Up @@ -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>
Expand Down
38 changes: 23 additions & 15 deletions src/count-down/README.md
View file
Open in desktop
Expand Up @@ -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"
Expand All @@ -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 | - | 倒计时结束时触发