diff --git a/src/components.ts b/src/components.ts index cc345b1c0..48811a8a2 100644 --- a/src/components.ts +++ b/src/components.ts @@ -33,7 +33,7 @@ export { DropdownMenu, DropdownItem } from './dropdown-menu'; export { Collapse, CollapsePanel } from './collapse'; export { Tabs, TabPanel } from './tabs'; export { Swiper, SwiperItem } from './swiper'; -export { Countdown } from './count-down'; +export { CountDown } from './count-down'; export { default as Avatar, AvatarGroup } from './avatar'; export { default as Image } from './image'; export { default as SwipeCell } from './swipe-cell'; diff --git a/src/count-down/__test__/__snapshots__/demo.test.jsx.snap b/src/count-down/__test__/__snapshots__/demo.test.jsx.snap index c3e2ed9be..2269084d3 100644 --- a/src/count-down/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/count-down/__test__/__snapshots__/demo.test.jsx.snap @@ -1,309 +1,360 @@ // Vitest Snapshot v1 exports[`CountDown > CountDown baseVue demo works fine 1`] = ` -
- +
+
- - - - - - - 00 - - - : - - - - - 15 - - - : - - - - - 00 - - - - - - -

+

- 时分秒 -

+
+ + + + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
-
- - - - - - - 00 - - - : - - - - - 15 - - - : - - - - - 00 - - - : - - - - - 123 - - - - - - -

+

- 带毫秒 -

+
+ + + + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + : + + + + + 000 + + + + +
+
-
- - - - - - - 15 - - - : - - - - - 32 - - - : - - - - - 00 - - - - - - -

+

- 带圆底 -

+
+ + + + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
-
- - - - - - - 00 - - - : - - - - - 15 - - - : - - - - - 00 - - - - - - -

+

- 带方形底 -

+
+ + + + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
-
- - - - - - - 01 - - - 天 - - - - - 06 - - - 时 - - - - - 52 - - - 分 - - - - - 00 - - +
+
- 秒 - - - - - -

+ 01 + + + 时 + + + + + 36 + + + 分 + + + + + 00 + + + 秒 + + + +

+
+
+
+ + 无底色带单位 + +
- 带单位 -

+
+ + + + 01 + + + 时 + + + + + 36 + + + 分 + + + + + 00 + + + 秒 + + + +
+
+
`; exports[`CountDown > CountDown mobileVue demo works fine 1`] = `

CountDown 倒计时

用于实时展示倒计时数值。

CountDown mobileVue demo works fine 1`] = `

- 01 类型 + 01 组件类型

-

- 动态倒计时间主要有时间数字和时分秒分割组成 -

+
-
- + +
+ + 时分秒 +
- - - - 00 + 01 : - 15 + 36 : 00 - - -

- 时分秒 -

+
- +
+
+ + 带毫秒 +
- - - - 00 + 01 : - 15 + 36 : 00 : - 123 + 000 - - -

- 带毫秒 -

+
- +
+
+ + 带方形底 +
- - - - 15 + 01 : - 32 + 36 : 00 - - -

- 带圆底 -

+
- +
+
+ + 带圆形底 +
- - - - 00 + 01 : - 15 + 36 : 00 - - -

- 带方形底 -

+
- +
+
+ + 带单位 +
- - - 01 - 天 - - - - - 06 - - 时 - 52 + 36 分 00 秒 - - -

- 带单位 -

+
- - - -
+
+ + 无底色带单位 + +
+
+ + + + 01 + + + 时 + + + + + 36 + + + 分 + + + + + 00 + + + 秒 + + + +
+
+
+ + +
+ +

- 02 规格 + 02 组件尺寸

- 动倒计时带方底和圆底各尺寸规格 + 倒计时 large/medium/small 尺寸

+
- - + + 时分秒 +
- - - - 00 + 01 : - 15 + 36 : 00 - - - - - +
+
+
- 00 + 01 : - 15 + 36 : 00 - - -

- S -

+
-
- - - - 00 + 01 : - 15 + 36 : 00 - - - - - +
+
+
+ + 带毫秒 + +
+
- 00 + 01 : - 15 + 36 : 00 + + : + + + + + 000 + - - -

- M -

+
-
- - - + 01 + + + : + + + + + 36 + + + : + + + + 00 + : + + + + + 000 + + + + +
+
+
+
+ + + + 01 + + : - 15 + 36 : 00 + + : + + + + + 000 + - - - - - +
+
+
+ + 带方形底 + +
+
+ 01 + + + : + + + + + 36 + + + : + + + + 00 + + + +
+
+
+
+ + + + 01 + : - 15 + 36 : 00 - - -

+

+
+
- L -

+ + + + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
-
- -
-
-
-`; - -exports[`CountDown > CountDown specsVue demo works fine 1`] = ` -
- - -
- - - - - - - 00 - - - : - - - - - 15 - - - : - - - - - 00 - - - - - - - - - - - - - 00 - - - : - - - - - 15 - - - : - - - - - 00 - - - - - - -

- S -

-
- -
- - - - - - - 00 - - - : - - - - - 15 - - + 带圆形底 + +
+
+ + + + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
+
+
+ + + + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
+
+
+ + + + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
+
+
- : - + + 带单位 + +
+
+ + + + 01 + + + 时 + + + + + 36 + + + 分 + + + + + 00 + + + 秒 + + + +
+
+
+
+ + + + 01 + + + 时 + + + + + 36 + + + 分 + + + + + 00 + + + 秒 + + + +
+
+
+
+ + + + 01 + + + 时 + + + + + 36 + + + 分 + + + + + 00 + + + 秒 + + + +
+
+
- +
+ +`; + +exports[`CountDown > CountDown sizeVue demo works fine 1`] = ` +
+ +
+ + 时分秒 + +
+
- 00 - - - - - - - - - + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
+
+
+ + + + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
+
+
+ + + + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
+
+
+ + 带毫秒 + +
+
+ + + + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + : + + + + + 000 + + + + +
+
+
- - - - 00 - - - : - - - - - 15 - - - : - - - - - 00 - - - - - - -

+ 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + : + + + + + 000 + + + + +

+
+
- M -

+
+ + + + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + : + + + + + 000 + + + + +
+
-
- - - - - - - 00 - - - : - - - - +
+
- 15 - - + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
+
+
- : - - - - + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
+
+
- 00 - - - - - - - - - + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
+
+
+ - - - +
+
- 00 - - + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
+
+
- : - - - - + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
+
+
- 15 - - + 01 + + + : + + + + + 36 + + + : + + + + + 00 + + + + +
+
+
+
+ + 带单位 + +
+
- : - - - - + 01 + + + 时 + + + + + 36 + + + 分 + + + + + 00 + + + 秒 + + + +
+
+
+
- 00 - - - - - - -

+ 01 + + + 时 + + + + + 36 + + + 分 + + + + + 00 + + + 秒 + + + +

+
+
- L -

+
+ + + + 01 + + + 时 + + + + + 36 + + + 分 + + + + + 00 + + + 秒 + + + +
+
diff --git a/src/count-down/__test__/demo.test.jsx b/src/count-down/__test__/demo.test.jsx index 5c2dc6d4b..4b51ea07f 100644 --- a/src/count-down/__test__/demo.test.jsx +++ b/src/count-down/__test__/demo.test.jsx @@ -5,12 +5,12 @@ import { mount } from '@vue/test-utils'; import baseVue from '@/count-down/demos/base.vue'; import mobileVue from '@/count-down/demos/mobile.vue'; -import specsVue from '@/count-down/demos/specs.vue'; +import sizeVue from '@/count-down/demos/size.vue'; const mapper = { baseVue, mobileVue, - specsVue, + sizeVue, }; describe('CountDown', () => { diff --git a/src/count-down/__test__/index.test.jsx b/src/count-down/__test__/index.test.jsx index 4be3bebc1..cd0b5a4ea 100644 --- a/src/count-down/__test__/index.test.jsx +++ b/src/count-down/__test__/index.test.jsx @@ -19,9 +19,6 @@ describe('countdown.vue', async () => { expect(wrapper.text()).toContain('00:00:01'); await sleep(500); expect(wrapper.text()).toContain('00:00:00'); - await sleep(500); - await nextTick(); - expect(wrapper.text()).toContain('default'); }); it('content', async () => { @@ -63,12 +60,12 @@ describe('countdown.vue', async () => { it('size', async () => { const wrapper = mount(); - expect(wrapper.find('.t-countdown--small').exists()).toBe(true); + expect(wrapper.find('.t-count-down--medium').exists()).toBe(true); }); it('theme', async () => { const wrapper = mount(); - expect(wrapper.find('.t-countdown--default').exists()).toBe(true); + expect(wrapper.find('.t-count-down--default').exists()).toBe(true); }); }); @@ -91,7 +88,7 @@ describe('countdown.vue', async () => { describe('slots', async () => { it('content', async () => { const temp =
测试
; - const wrapper = mount(, { + const wrapper = mount(, { slots: { content: temp, }, diff --git a/src/count-down/count-down.en-US.md b/src/count-down/count-down.en-US.md new file mode 100644 index 000000000..341b605a3 --- /dev/null +++ b/src/count-down/count-down.en-US.md @@ -0,0 +1,25 @@ +:: BASE_DOC :: + +## API + +### CountDown Props + +name | type | default | description | required +-- | -- | -- | -- | -- +autoStart | Boolean | true | \- | N +content | String / Slot / Function | 'default' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +format | String | HH:mm:ss | \- | N +millisecond | Boolean | false | \- | N +size | String | 'small' | options：small/medium/large | N +splitWithUnit | Boolean | false | \- | N +theme | String | 'default' | options：default/round/square | N +time | Number | - | required | Y +onChange | Function | | Typescript：`(time: TimeData) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。
`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`
| N +onFinish | Function | | Typescript：`() => void`
| N + +### CountDown Events + +name | params | description +-- | -- | -- +change | `(time: TimeData)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。
`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`
+finish | \- | \- diff --git a/src/count-down/count-down.md b/src/count-down/count-down.md index 8b851da23..a50f27d42 100644 --- a/src/count-down/count-down.md +++ b/src/count-down/count-down.md @@ -6,9 +6,12 @@ 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- autoStart | Boolean | true | 是否自动开始倒计时 | N -content | String / Slot / Function | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +content | String / Slot / Function | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N format | String | HH:mm:ss | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | N millisecond | Boolean | false | 是否开启毫秒级渲染 | N +size | String | 'medium' | 倒计时尺寸。可选项：small/medium/large | N +splitWithUnit | Boolean | false | 使用时间单位分割 | N +theme | String | 'default' | 倒计时风格。可选项：default/round/square | N time | Number | - | 必需。倒计时时长，单位毫秒 | Y onChange | Function | | TS 类型：`(time: TimeData) => void`
时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。
`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`
| N onFinish | Function | | TS 类型：`() => void`
倒计时结束时触发 | N @@ -18,4 +21,4 @@ onFinish | Function | | TS 类型：`() => void`
倒计时结束时触发 | 名称 | 参数 | 描述 -- | -- | -- change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。
`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`
-finish | - | 倒计时结束时触发 +finish | \- | 倒计时结束时触发 diff --git a/src/count-down/count-down.vue b/src/count-down/count-down.vue index 7bab8bb98..28449ae48 100644 --- a/src/count-down/count-down.vue +++ b/src/count-down/count-down.vue @@ -1,45 +1,41 @@ - diff --git a/src/count-down/demos/size.vue b/src/count-down/demos/size.vue new file mode 100644 index 000000000..372cb320d --- /dev/null +++ b/src/count-down/demos/size.vue @@ -0,0 +1,78 @@ + + + diff --git a/src/count-down/demos/specs.vue b/src/count-down/demos/specs.vue deleted file mode 100644 index e2a011499..000000000 --- a/src/count-down/demos/specs.vue +++ /dev/null @@ -1,112 +0,0 @@ - - - - - diff --git a/src/count-down/index.ts b/src/count-down/index.ts index 9db5959c6..054576815 100644 --- a/src/count-down/index.ts +++ b/src/count-down/index.ts @@ -1,4 +1,4 @@ -import _Countdown from './count-down.vue'; +import _CountDown from './count-down.vue'; import { withInstall, WithInstallType } from '../shared'; import { TdCountDownProps } from './type'; @@ -7,4 +7,4 @@ import './style'; export * from './type'; export type CountDownProps = TdCountDownProps; -export const Countdown: WithInstallType = withInstall(_Countdown); +export const CountDown: WithInstallType = withInstall(_CountDown); diff --git a/src/count-down/props.ts b/src/count-down/props.ts index 800ac2d5d..396716ed1 100644 --- a/src/count-down/props.ts +++ b/src/count-down/props.ts @@ -25,20 +25,30 @@ export default { }, /** 是否开启毫秒级渲染 */ millisecond: Boolean, - /** 倒计时时长，单位毫秒 */ - time: { - type: Number, - required: true, - }, /** 倒计时尺寸 */ size: { - type: String, - default: 'small', + type: String as PropType, + default: 'medium' as TdCountDownProps['size'], + validator(val: TdCountDownProps['size']): boolean { + if (!val) return true; + return ['small', 'medium', 'large'].includes(val); + }, }, + /** 使用时间单位分割 */ + splitWithUnit: Boolean, /** 倒计时风格 */ theme: { - type: String, - default: 'default', + type: String as PropType, + default: 'default' as TdCountDownProps['theme'], + validator(val: TdCountDownProps['theme']): boolean { + if (!val) return true; + return ['default', 'round', 'square'].includes(val); + }, + }, + /** 倒计时时长，单位毫秒 */ + time: { + type: Number, + required: true, }, /** 时间变化时触发 */ onChange: Function as PropType, diff --git a/src/count-down/style/index.js b/src/count-down/style/index.js index f576fed39..da1cf7190 100644 --- a/src/count-down/style/index.js +++ b/src/count-down/style/index.js @@ -1 +1 @@ -import '../../_common/style/mobile/components/count-down/_index.less'; +import '../../_common/style/mobile/components/count-down/v2/_index.less'; diff --git a/src/count-down/type.ts b/src/count-down/type.ts index cddeeea70..c82bac491 100644 --- a/src/count-down/type.ts +++ b/src/count-down/type.ts @@ -27,21 +27,25 @@ export interface TdCountDownProps { * @default false */ millisecond?: boolean; - /** - * 倒计时时长，单位毫秒 - */ - time: number; - /** * 倒计时尺寸 * @default 'small' */ size?: 'small' | 'medium' | 'large'; + /** + * 使用时间单位分割 + * @default false + */ + splitWithUnit?: boolean; /** * 倒计时风格 * @default 'default' */ theme?: 'default' | 'round' | 'square'; + /** + * 倒计时时长，单位毫秒 + */ + time: number; /** * 时间变化时触发 */ diff --git a/src/shared/useCountDown/index.ts b/src/shared/useCountDown/index.ts index f67c94f6f..a95d0eeef 100644 --- a/src/shared/useCountDown/index.ts +++ b/src/shared/useCountDown/index.ts @@ -4,11 +4,19 @@ import { TdUseCountDownProps, TdUseCountDown } from './type'; import { getRemainTimes, getShowTimes, getScreenFps } from './utils'; export function useCountDown(props: TdUseCountDownProps): TdUseCountDown { - const { time = 0, autoStart, millisecond, format = 'HH:mm:ss', onFinish, onChange } = props || {}; + const { + time = 0, + autoStart, + millisecond = false, + format = 'HH:mm:ss', + splitWithUnit = false, + onFinish, + onChange, + } = props || {}; // state const fps = ref(); const count = ref(Number(time)); - const showTimes = reactive(getShowTimes(getRemainTimes(time), format, !!millisecond)); + const showTimes = reactive(getShowTimes(getRemainTimes(time), format, millisecond, splitWithUnit)); // raf const { pause, resume } = useRafFn( @@ -25,7 +33,7 @@ export function useCountDown(props: TdUseCountDownProps): TdUseCountDown { const times = getRemainTimes(count.value); onChange?.(times); count.value === 0 && onFinish?.(); - getShowTimes(times, format)?.forEach?.((i, idx) => (showTimes[idx].value = i?.value)); + getShowTimes(times, format, millisecond, splitWithUnit)?.forEach?.((i, idx) => (showTimes[idx].value = i?.value)); }, { immediate: autoStart }, ); diff --git a/src/shared/useCountDown/type.ts b/src/shared/useCountDown/type.ts index bcf21712d..18a813fe2 100644 --- a/src/shared/useCountDown/type.ts +++ b/src/shared/useCountDown/type.ts @@ -23,6 +23,21 @@ export interface TdUseCountDownProps { * @default false */ millisecond?: boolean; + /** + * 倒计时尺寸 + * @default 'small' + */ + size?: 'small' | 'medium' | 'large'; + /** + * 使用时间单位分割 + * @default false + */ + splitWithUnit?: boolean; + /** + * 倒计时风格 + * @default 'default' + */ + theme?: 'default' | 'round' | 'square'; /** * 倒计时时长，单位毫秒 */ diff --git a/src/shared/useCountDown/utils.ts b/src/shared/useCountDown/utils.ts index a2084aef8..3983988c8 100644 --- a/src/shared/useCountDown/utils.ts +++ b/src/shared/useCountDown/utils.ts @@ -1,5 +1,13 @@ import { TimeData, TdUseCountDownShowTimes } from './type'; +export const TimeDataUnit = { + DD: '天', + HH: '时', + mm: '分', + ss: '秒', + SSS: '毫秒', +}; + /** * getRemainTimes * @param time @@ -55,9 +63,14 @@ export const getMark = (format: string, type: string): string => format?.split?. * @param time * @returns */ -export const getShowTimes = (times: TimeData, format: string, milliseconds = false): TdUseCountDownShowTimes => { +export const getShowTimes = ( + times: TimeData, + format: string, + millisecond = false, + splitWithUnit = false, +): TdUseCountDownShowTimes => { format = (format || 'DD:HH:mm:ss')?.toUpperCase?.(); - milliseconds && !format.includes(':SSS') && (format = format.concat(':SSS')); + millisecond && !format.includes(':SSS') && (format = format.concat(':SSS')); const showTimes: TdUseCountDownShowTimes = []; if (format?.indexOf('DD') > -1) { showTimes?.push({ @@ -67,25 +80,25 @@ export const getShowTimes = (times: TimeData, format: string, milliseconds = fal } if (format?.indexOf('HH') > -1) { showTimes?.push({ - mark: getMark(format, 'HH'), + mark: splitWithUnit ? TimeDataUnit.HH : getMark(format, 'HH'), value: fillZero(times?.hours), }); } if (format?.indexOf('MM') > -1) { showTimes?.push({ - mark: getMark(format, 'MM'), + mark: splitWithUnit ? TimeDataUnit.mm : getMark(format, 'MM'), value: fillZero(times?.minutes), }); } if (format?.indexOf('SS') > -1) { showTimes?.push({ - mark: getMark(format, 'SS'), + mark: splitWithUnit ? TimeDataUnit.ss : getMark(format, 'SS'), value: fillZero(times?.seconds), }); } - if (format?.indexOf('SSS') > -1) { + if (format?.indexOf('SSS') > -1 || millisecond) { showTimes?.push({ - mark: getMark(format, 'SSS'), + mark: splitWithUnit ? TimeDataUnit.SSS : getMark(format, 'SSS'), value: fillZero(times?.milliseconds, true), }); }