Skip to content

Commit 539a6f7

Browse files
authored
feat: 添加无法自定义显示天,时,分,秒 (#1716)
* fix: 修复无法自定义显示天,时,分,秒 * fix: 修复calculateTime * fix: 只添加isShowMinute
1 parent 2d34ac8 commit 539a6f7

File tree

3 files changed

+41
-19
lines changed

3 files changed

+41
-19
lines changed

packages/taro-ui-docs/markdown/countdown.md

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,16 +67,26 @@ export default class CountdownPage extends Taro.Component {
6767
seconds={10}
6868
/>
6969
```
70-
7170
:::
7271

72+
## 只显示秒钟
73+
74+
:::demo
75+
76+
```html
77+
<AtCountdown
78+
isShowHour={false}
79+
isShowMinute={false}
80+
seconds={90}
81+
/>
82+
```
83+
:::
7384
## 自定义格式化
7485

7586
:::demo
7687

7788
```html
7889
<AtCountdown
79-
isShowDay
8090
format={{ hours: ':', minutes: ':', seconds: '' }}
8191
day={2}
8292
hours={1}
@@ -109,6 +119,7 @@ export default class CountdownPage extends Taro.Component {
109119
| isCard | 是否显示卡片式样式 | Boolean | - | false |
110120
| isShowDay | 是否显示天数 | Boolean | - | false |
111121
| isShowHour | 是否显示小时 | Boolean | - | true |
122+
| isShowMinute | 是否显示分钟 | Boolean | - | true |
112123
| format | 格式化分割符号 | Object | - | `day: '天',hours: '时',minutes: '分',seconds: '秒'` |
113124
| day | 天数 | Number | - | 0 |
114125
| hours | 小时 | Number | - | 0 |

packages/taro-ui/src/components/countdown/index.tsx

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,13 @@ const toSeconds = (
1919
seconds: number
2020
): number => day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
2121

22+
const defaultFormat = {
23+
day: '天',
24+
hours: '时',
25+
minutes: '分',
26+
seconds: '秒'
27+
}
28+
2229
export default class AtCountdown extends React.Component<
2330
AtCountDownProps,
2431
AtCountdownState
@@ -64,8 +71,12 @@ export default class AtCountdown extends React.Component<
6471

6572
if (this.seconds > 0) {
6673
day = this.props.isShowDay ? Math.floor(this.seconds / (60 * 60 * 24)) : 0
67-
hours = Math.floor(this.seconds / (60 * 60)) - day * 24
68-
minutes = Math.floor(this.seconds / 60) - day * 24 * 60 - hours * 60
74+
hours = this.props.isShowHour
75+
? Math.floor(this.seconds / (60 * 60)) - day * 24
76+
: 0
77+
minutes = this.props.isShowMinute
78+
? Math.floor(this.seconds / 60) - day * 24 * 60 - hours * 60
79+
: 0
6980
seconds =
7081
Math.floor(this.seconds) -
7182
day * 24 * 60 * 60 -
@@ -131,15 +142,11 @@ export default class AtCountdown extends React.Component<
131142
const {
132143
className,
133144
customStyle,
134-
format = {
135-
day: '天',
136-
hours: '时',
137-
minutes: '分',
138-
seconds: '秒'
139-
},
140-
isShowDay,
145+
format = defaultFormat,
141146
isCard,
142-
isShowHour
147+
isShowDay,
148+
isShowHour,
149+
isShowMinute
143150
} = this.props
144151

145152
const { _day, _hours, _minutes, _seconds } = this.state
@@ -161,7 +168,9 @@ export default class AtCountdown extends React.Component<
161168
{isShowHour && (
162169
<AtCountdownItem num={_hours} separator={format?.hours || ''} />
163170
)}
164-
<AtCountdownItem num={_minutes} separator={format?.minutes || ''} />
171+
{isShowMinute && (
172+
<AtCountdownItem num={_minutes} separator={format?.minutes || ''} />
173+
)}
165174
<AtCountdownItem num={_seconds} separator={format?.seconds || ''} />
166175
</View>
167176
)
@@ -174,12 +183,8 @@ AtCountdown.defaultProps = {
174183
isCard: false,
175184
isShowDay: false,
176185
isShowHour: true,
177-
format: {
178-
day: '天',
179-
hours: '时',
180-
minutes: '分',
181-
seconds: '秒'
182-
},
186+
isShowMinute: true,
187+
format: defaultFormat,
183188
day: 0,
184189
hours: 0,
185190
minutes: 0,
@@ -192,6 +197,7 @@ AtCountdown.propTypes = {
192197
isCard: PropTypes.bool,
193198
isShowDay: PropTypes.bool,
194199
isShowHour: PropTypes.bool,
200+
isShowMinute: PropTypes.bool,
195201
format: PropTypes.object,
196202
day: PropTypes.number,
197203
hours: PropTypes.number,

packages/taro-ui/types/countdown.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,11 @@ export interface AtCountDownProps extends AtComponent {
4141
* @default true
4242
*/
4343
isShowHour?: boolean
44+
/**
45+
* 是否显示分钟
46+
* @default true
47+
*/
48+
isShowMinute?: boolean
4449
/**
4550
* 格式化分割符号
4651
* @default { day: '天', hours: '时', minutes: '分', seconds: '秒' }

0 commit comments

Comments
 (0)