From 0db2d8980c3a275ee7038ccd6f6b545b3e64816f Mon Sep 17 00:00:00 2001 From: Laney <1240566558@qq.com> Date: Tue, 30 Nov 2021 22:37:09 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix=EF=BC=9A=20=E4=BF=AE=E6=94=B9=E7=8A=B6?= =?UTF-8?q?=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/countdown/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/countdown/index.ts b/packages/devui-vue/devui/countdown/index.ts index d3cf19a2..b6b5d272 100644 --- a/packages/devui-vue/devui/countdown/index.ts +++ b/packages/devui-vue/devui/countdown/index.ts @@ -10,7 +10,7 @@ export { Countdown } export default { title: 'Countdown 倒计时', category: '数据展示', - status: '已完成', + status: '100%', install(app: App): void { app.use(Countdown as any) } -- Gitee From 5c632b9ee69d582965264d1e2db6aee964291969 Mon Sep 17 00:00:00 2001 From: "heqinqin@300.cn" Date: Wed, 1 Dec 2021 23:08:41 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix(countdown):=20=E6=B7=BB=E5=8A=A0demo?= =?UTF-8?q?=E9=93=BE=E6=8E=A5=EF=BC=8C=E5=AE=8C=E5=96=84=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E4=BE=8B=E5=AD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/countdown/src/countdown.scss | 2 +- .../devui/countdown/src/countdown.tsx | 5 +- .../docs/components/countdown/index.md | 172 ++++++++++++++++-- 3 files changed, 165 insertions(+), 14 deletions(-) diff --git a/packages/devui-vue/devui/countdown/src/countdown.scss b/packages/devui-vue/devui/countdown/src/countdown.scss index 33f18140..3bc82c8f 100644 --- a/packages/devui-vue/devui/countdown/src/countdown.scss +++ b/packages/devui-vue/devui/countdown/src/countdown.scss @@ -3,9 +3,9 @@ .devui-countdown { .countdown-content { font-size: 24px; + color: $devui-text; span { - color: $devui-text; display: inline-block; } diff --git a/packages/devui-vue/devui/countdown/src/countdown.tsx b/packages/devui-vue/devui/countdown/src/countdown.tsx index d5aec728..f99ad545 100644 --- a/packages/devui-vue/devui/countdown/src/countdown.tsx +++ b/packages/devui-vue/devui/countdown/src/countdown.tsx @@ -20,11 +20,12 @@ export default defineComponent({ } return pre + cur.k; }, '') - timeStr.value = t; + timeStr.value = t; } const getTime = () => { - const leftTime = props.value > new Date().getTime() ? props.value - new Date().getTime() : 0 + const value = new Date(props.value).getTime(); + const leftTime = value > new Date().getTime() ? value - new Date().getTime() : 0 const formatTime = getFormatTime(leftTime); const legalTime = getLegalTime(s, formatTime); !ctx.slots.default && getTimeStr(legalTime); diff --git a/packages/devui-vue/docs/components/countdown/index.md b/packages/devui-vue/docs/components/countdown/index.md index af6b6a68..53fffc30 100644 --- a/packages/devui-vue/docs/components/countdown/index.md +++ b/packages/devui-vue/docs/components/countdown/index.md @@ -8,13 +8,13 @@ ### 基本用法 -默认：时分秒 +默认：时分秒: :::demo ```vue @@ -43,7 +43,44 @@ export default defineComponent({ ::: -年月日时分秒 +### 时间格式 +时分秒毫秒: +:::demo + +```vue + + + + + +``` +::: + + + +年月日时分秒: :::demo ```vue @@ -80,6 +117,120 @@ export default defineComponent({ ``` ::: + + +注：当format某一项时间没有的情况下，会将没有的那一项值累积到下一项。 +例如：当没有M(月)的时候，会将月的值*30累加到日，根据format格式化的值会从通过时间onchange的legalTime值返回，如下： +:::demo + +```vue + + + + + +``` +::: + + + +### 前缀和后缀 +前缀和后缀: +:::demo + +```vue + + + + + +``` +::: + + + +### 设置style +设置倒计时文字样式: +:::demo + +```vue + + + + + +``` +::: + + ### 插槽 :::demo @@ -150,15 +301,14 @@ export default defineComponent({ d-countdown 参数 -| 参数 | 类型 | 默认 | 说明 | -| ---- | ---- | ---- | ---- | -| format | string | HH:mm:ss | 格式化倒计时展示，参考moment | -| value | number | - | 数值内容 | -| prefix | string | - | 设置数值的前缀 | -| suffix | string | - | 设置数值的后缀 | -| valueStyle | CSSProperties | - | 设置数值的样式 | +| 参数 | 类型 | 默认 | 说明 | 跳转demo | +| ---- | ---- | ---- | ---- | ---- | +| format | string | HH:mm:ss | 格式化倒计时展示，参考moment | [时间格式](#时间格式) | +| value | number | - | 数值内容 | [基本用法](#基本用法) | +| prefix | string | - | 设置数值的前缀 | [前缀和后缀](#前缀和后缀) | +| suffix | string | - | 设置数值的后缀 | [前缀和后缀](#前缀和后缀) | +| valueStyle | CSSProperties | - | 设置数值的样式 | [设置style](#设置style) | -### d-countdown 事件 d-countdown 事件 -- Gitee From 17736d6e0e604948d6a939790bb58bdc13bfbe3b Mon Sep 17 00:00:00 2001 From: "heqinqin@300.cn" Date: Fri, 3 Dec 2021 19:56:33 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix(countdown):=20doc=E7=A4=BA=E4=BE=8B?= =?UTF-8?q?=E5=AE=8C=E5=96=84=EF=BC=8C=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../countdown/__tests__/countdown.spec.ts | 88 ++++++++++++++++++- .../devui/countdown/src/countdown.tsx | 29 +++--- .../docs/components/countdown/index.md | 18 ++-- 3 files changed, 118 insertions(+), 17 deletions(-) diff --git a/packages/devui-vue/devui/countdown/__tests__/countdown.spec.ts b/packages/devui-vue/devui/countdown/__tests__/countdown.spec.ts index 138a2a5c..4eeb18c5 100644 --- a/packages/devui-vue/devui/countdown/__tests__/countdown.spec.ts +++ b/packages/devui-vue/devui/countdown/__tests__/countdown.spec.ts @@ -1,8 +1,94 @@ import { mount } from '@vue/test-utils'; import { Countdown } from '../index'; +import { nextTick } from 'vue' describe('countdown test', () => { - it('countdown init render', async () => { + it('countdown default render', async () => { // todo + const wrapper = mount(Countdown, { + props: { + value: +new Date() + } + }) + expect(wrapper.get('.countdown-content')); + + }) + + it('countdown text', () => { + // todo + const time = Date.now() + 11 * 24 * 60 * 60 * 1000 + 8 * 60 * 60 * 1000 + 40 * 60 * 1000 + 40 * 1000; + [ + ['YY-MM-DD HH:mm:ss', '00-00-11 08:40:40'], + ['HH:mm:ss', '272:40:40'], + ['YY-MM-DD mm:ss', '00-00-11 520:40'], + ].forEach(async ([format, value]) => { + const wrapper = await mount(Countdown, { + props: { + format, + value: time, + } + }) + expect(wrapper.find('.countdown-value').text()).toEqual(value) + }) + + }) + + it('countdown millisecond', async () => { + const time = Date.now() + 11 * 24 * 60 * 60 * 1000 + 8 * 60 * 60 * 1000 + 40 * 60 * 1000 + 40 * 1000 + 5; + const wrapper = await mount(Countdown, { + props: { + format: 'HHH:mm:ss SSS', + value: time, + } + }) + await nextTick(); + expect(Math.abs(time -Date.now() - wrapper.emitted('onChange')[0][0].leftTime) < 16).toEqual(true); + }) + + it('countdown prefix and suffix', async () => { + const time = Date.now() + 5000; + const prefix = '前缀-'; + const suffix = '前缀-'; + const wrapper = mount(Countdown, { + props: { + format: 'HHH:mm:ss SSS', + value: time, + prefix, + suffix + } + }) + expect(wrapper.find('.countdown-prefix').text()).toEqual(prefix); + expect(wrapper.find('.countdown-suffix').text()).toEqual(suffix); + }) + + it('countdown valueStyle', async () => { + const time = Date.now() + 5000; + const valueStyle = {'color': 'rgb(94, 124, 224)', 'font-size': '20px'}; + const wrapper = await mount(Countdown, { + props: { + format: 'HHH:mm:ss SSS', + value: time, + valueStyle + } + }) + const { style } = wrapper.find('.countdown-content').attributes(); + let styleStr = ''; + for (const k in valueStyle) { + styleStr += `${k}: ${valueStyle[k]}; ` + } + expect(style).toEqual(styleStr.slice(0,-1)); + }) + + it('countdown slot', async () => { + const time = Date.now() + 5000; + const wrapper = await mount(Countdown, { + props: { + value: time + }, + slots: { + default: 'test slot' + } + }) + expect(wrapper.find('.devui-countdown').text()).toEqual('test slot'); }) }) diff --git a/packages/devui-vue/devui/countdown/src/countdown.tsx b/packages/devui-vue/devui/countdown/src/countdown.tsx index f99ad545..1486b2b7 100644 --- a/packages/devui-vue/devui/countdown/src/countdown.tsx +++ b/packages/devui-vue/devui/countdown/src/countdown.tsx @@ -1,4 +1,4 @@ -import { defineComponent, ref, onUnmounted } from 'vue' +import { defineComponent, ref, onUnmounted ,onMounted } from 'vue' import { countdownProps, CountdownProps } from './countdown-types' import './countdown.scss' import { getFormatTime, getLegalTime, getTimeSplit, getDeduplication, numFormat } from './utils' @@ -8,6 +8,7 @@ export default defineComponent({ props: countdownProps, emits: ['onChange', 'onFinish'], setup(props: CountdownProps, ctx) { + const countdown = ref() const s = getDeduplication(props.format); const timeFormat = getTimeSplit(props.format); const timeStr = ref('') @@ -37,19 +38,25 @@ export default defineComponent({ return leftTime; } - const countdown = setInterval(() => { - const t = getTime(); - if (t === 0) { - ctx.emit('onFinish'); - clearInterval(countdown) - } - }, s.has('S') ? 100 : 1000) + const startTime = () => { + getTime(); + if (countdown.value) return; + countdown.value = setInterval(() => { + const t = getTime(); + if (t === 0) { + ctx.emit('onFinish'); + clearInterval(countdown.value) + } + }, s.has('S') ? 100 : 1000) + + } - getTime(); + onMounted(()=>{ + startTime() + }) onUnmounted(() => { - clearInterval(countdown); + clearInterval(countdown.value); }) - return () => { return (
{ diff --git a/packages/devui-vue/docs/components/countdown/index.md b/packages/devui-vue/docs/components/countdown/index.md index 53fffc30..0dc06a6b 100644 --- a/packages/devui-vue/docs/components/countdown/index.md +++ b/packages/devui-vue/docs/components/countdown/index.md @@ -14,7 +14,7 @@ ```vue @@ -23,12 +23,14 @@ import { defineComponent, ref } from 'vue' export default defineComponent({ setup() { + const deadline = ref(Date.now() + 100 *1000); const changeTime = (n) => { } const finishTime = () => { } return { msg: 'Countdown 倒计时 组件文档示例', + deadline, changeTime, finishTime } @@ -50,7 +52,7 @@ export default defineComponent({ ```vue @@ -59,12 +61,14 @@ import { defineComponent, ref } from 'vue' export default defineComponent({ setup() { + const deadline = ref(Date.now() + 2 * 60 * 60 *1000); const changeTime = (n) => { } const finishTime = () => { } return { msg: 'Countdown 倒计时 组件文档示例', + deadline, changeTime, finishTime } @@ -126,7 +130,7 @@ export default defineComponent({ ```vue @@ -135,12 +139,14 @@ import { defineComponent, ref } from 'vue' export default defineComponent({ setup() { + const deadline = ref(new Date().getTime() + 700 * 24 * 60 * 60 *1000 + 5000); const changeTime = (n) => { } const finishTime = () => { } return { msg: 'Countdown 倒计时 组件文档示例', + deadline, changeTime, finishTime } @@ -163,7 +169,7 @@ export default defineComponent({ ```vue @@ -200,7 +206,7 @@ export default defineComponent({ ```vue @@ -209,6 +215,7 @@ import { defineComponent, ref } from 'vue' export default defineComponent({ setup() { + const deadline = ref(new Date().getTime() + 10 * 24 * 60 * 60 *1000); const styles = {color: '#5e7ce0'} const changeTime = (n) => { } @@ -216,6 +223,7 @@ export default defineComponent({ } return { msg: 'Countdown 倒计时 组件文档示例', + deadline, styles, changeTime, finishTime -- Gitee From f60d3396c92323dff1e4207d54699acde08ed3fd Mon Sep 17 00:00:00 2001 From: "heqinqin@300.cn" Date: Mon, 6 Dec 2021 09:40:13 +0800 Subject: [PATCH 4/4] =?UTF-8?q?doc(countdown):=20=E5=8E=BB=E9=99=A4?= =?UTF-8?q?=E5=86=97=E4=BD=99=E6=A0=87=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/docs/components/countdown/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/devui-vue/docs/components/countdown/index.md b/packages/devui-vue/docs/components/countdown/index.md index 0dc06a6b..fcdce27a 100644 --- a/packages/devui-vue/docs/components/countdown/index.md +++ b/packages/devui-vue/docs/components/countdown/index.md @@ -163,7 +163,6 @@ export default defineComponent({ ### 前缀和后缀 -前缀和后缀: :::demo ```vue -- Gitee