From 1a44d029dc6cf6a7e73534f3ee427ffec7c80e13 Mon Sep 17 00:00:00 2001 From: "heqinqin@300.cn" Date: Mon, 22 Nov 2021 23:23:42 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat(=20readTip):=20=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E5=BC=82=E6=AD=A5=E5=8A=A0=E8=BD=BD=E6=95=B0=E6=8D=AE=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E5=92=8CappendBody=E5=B1=9E=E6=80=A7=E6=94=AF?= =?UTF-8?q?=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../countdown/__tests__/countdown.spec.ts | 8 ++ packages/devui-vue/devui/countdown/index.ts | 18 +++ .../devui/countdown/src/countdown-types.ts | 37 ++++++ .../devui/countdown/src/countdown.scss | 16 +++ .../devui/countdown/src/countdown.tsx | 119 ++++++++++++++++++ .../docs/components/countdown/index.md | 104 +++++++++++++++ 6 files changed, 302 insertions(+) create mode 100644 packages/devui-vue/devui/countdown/__tests__/countdown.spec.ts create mode 100644 packages/devui-vue/devui/countdown/index.ts create mode 100644 packages/devui-vue/devui/countdown/src/countdown-types.ts create mode 100644 packages/devui-vue/devui/countdown/src/countdown.scss create mode 100644 packages/devui-vue/devui/countdown/src/countdown.tsx create mode 100644 packages/devui-vue/docs/components/countdown/index.md diff --git a/packages/devui-vue/devui/countdown/__tests__/countdown.spec.ts b/packages/devui-vue/devui/countdown/__tests__/countdown.spec.ts new file mode 100644 index 00000000..138a2a5c --- /dev/null +++ b/packages/devui-vue/devui/countdown/__tests__/countdown.spec.ts @@ -0,0 +1,8 @@ +import { mount } from '@vue/test-utils'; +import { Countdown } from '../index'; + +describe('countdown test', () => { + it('countdown init render', async () => { + // todo + }) +}) diff --git a/packages/devui-vue/devui/countdown/index.ts b/packages/devui-vue/devui/countdown/index.ts new file mode 100644 index 00000000..904c2e07 --- /dev/null +++ b/packages/devui-vue/devui/countdown/index.ts @@ -0,0 +1,18 @@ +import type { App } from 'vue' +import Countdown from './src/countdown' + +Countdown.install = function(app: App): void { + app.component(Countdown.name, Countdown) +} + +export { Countdown } + +export default { + title: 'Countdown 倒计时', + category: '数据展示', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + app.use(Countdown as any) + } +} + \ No newline at end of file diff --git a/packages/devui-vue/devui/countdown/src/countdown-types.ts b/packages/devui-vue/devui/countdown/src/countdown-types.ts new file mode 100644 index 00000000..91a13a1f --- /dev/null +++ b/packages/devui-vue/devui/countdown/src/countdown-types.ts @@ -0,0 +1,37 @@ +import type { ExtractPropTypes } from 'vue' + +export const countdownProps = { + value: { + type: Number, + required: true + }, + format: { + type: String, + default: 'HH:mm:ss' + }, + prefix: { + type: String, + default: '' + }, + suffix: { + type: String, + default: '' + }, + valueStyle: { + type: Object, + default: ()=>{ + return {} + } + } +} as const + +export interface DateFormat{ + Y?: string | number + M?: string | number + D?: string | number + H?: string | number + m?: string | number + s?: string | number + S?: string | number +} +export type CountdownProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/countdown/src/countdown.scss b/packages/devui-vue/devui/countdown/src/countdown.scss new file mode 100644 index 00000000..6e81ae95 --- /dev/null +++ b/packages/devui-vue/devui/countdown/src/countdown.scss @@ -0,0 +1,16 @@ +.devui-countdown { + font-size: 30px; + font-weight: bold; + + span { + display: inline-block; + } + + .countdown-prefix { + margin-right: 4px; + } + + .countdown-suffix { + margin-left: 4px; + } +} diff --git a/packages/devui-vue/devui/countdown/src/countdown.tsx b/packages/devui-vue/devui/countdown/src/countdown.tsx new file mode 100644 index 00000000..bd6d9fe4 --- /dev/null +++ b/packages/devui-vue/devui/countdown/src/countdown.tsx @@ -0,0 +1,119 @@ +import { defineComponent, ref, onUnmounted } from 'vue' +import { countdownProps, CountdownProps, DateFormat } from './countdown-types' +import './countdown.scss' + +export default defineComponent({ + name: 'DCountdown', + props: countdownProps, + emits: ['onChange', 'onFinish'], + setup(props: CountdownProps, ctx) { + const fomatMap = new Map([['Y', 12], ['M', 30], ['D', 24], ['H', 60], ['m', 60], ['s', 1000], ['S', 1]]) + const timeInitialValue = new Map([['Y', 0], ['M', 0], ['D', 0], ['H', 0], ['m', 0], ['s', 0], ['S', 0]]); + const dateValue = new Map([['Y', 0], ['M', 0], ['D', 0], ['H', 0], ['m', 0], ['s', 0], ['S', 0]]) + const s = new Set([]); + const timeFormat: { k: string; n: number; }[] = [] + const timeStr = ref('') + + const initFormat = () => { + const { format } = props; + const m = timeFormat; + for (let i = 0; i < format.length; i++) { + const k = format[i]; + if (m.length === 0 || m[m.length - 1].k !== k || !fomatMap.has(k)) { + m.push({ k, n: 1 }) + } else { + m[m.length - 1].n++ + } + if (fomatMap.has(k)) { + s.add(k) + } + } + } + const numFormat = (n: number, len: number) => { + const maxNum = 10 ** len - 1; + if (n >= maxNum) { + return n; + } else { + const carryLen = len - n.toString().length; + let str = '' + for (let i = 0; i < carryLen; i++) { + str += '0' + } + return str + n; + } + } + const getTime = () => { + const timediff = props.value - new Date().getTime(); + const leftTime = timediff > 0 ? timediff : 0 + const year = Math.floor(leftTime / (365 * 24 * 60 * 60 * 1000)); + const month = Math.floor(leftTime / (30 * 24 * 60 * 60 * 1000) % 12); + const day = Math.floor(leftTime / (24 * 60 * 60 * 1000) % 30); + const hour = Math.floor(leftTime / (60 * 60 * 1000) % 24); + const minute = Math.floor(leftTime / (60 * 1000) % 60); + const second = Math.floor(leftTime / 1000 % 60); + const millsecond = leftTime % 1000; + timeInitialValue.set('Y', year); + timeInitialValue.set('M', month); + timeInitialValue.set('D', day); + timeInitialValue.set('H', hour); + timeInitialValue.set('m', minute); + timeInitialValue.set('s', second); + timeInitialValue.set('S', millsecond); + let storage = 0; + for (const k of dateValue.keys()) { + if (s.has(k)) { + dateValue.set(k, timeInitialValue.get(k) + storage) + storage = 0; + } else { + storage += timeInitialValue.get(k) * fomatMap.get(k); + } + } + if(!s.has('S')) { + dateValue.set('s', Math.round(leftTime / 1000 % 60)) + } + + const t = timeFormat.reduce((pre, cur) => { + if (timeInitialValue.has(cur.k)) { + return pre + numFormat(dateValue.get(cur.k), cur.n) + } + return pre + cur.k; + }, '') + timeStr.value = t; + ctx.emit('onChange', { + leftTime, + timeInitialValue, + dateValue + }); + return leftTime; + } + initFormat(); + getTime(); + const countdown = setInterval(() => { + const t = getTime(); + if (t === 0) { + ctx.emit('onFinish'); + clearInterval(countdown) + } + }, s.has('S') ? 100 : 1000) + + + onUnmounted(() => { + clearInterval(countdown) + }) + + return () => { + return (
+ + { props.prefix } + + + {timeStr.value} + + + { props.suffix } + +
+ ) + } + } +}) diff --git a/packages/devui-vue/docs/components/countdown/index.md b/packages/devui-vue/docs/components/countdown/index.md new file mode 100644 index 00000000..3b4f5447 --- /dev/null +++ b/packages/devui-vue/docs/components/countdown/index.md @@ -0,0 +1,104 @@ +# Countdown 倒计时 + +倒计时 + +### 何时使用 + +当倒计时时使用 + + +### 基本用法 +默认：时分秒 +:::demo + +```vue + + + + + +``` +::: + + +年月日时分秒 +:::demo + +```vue + + + + + +``` +::: + +### d-countdown + +d-countdown 参数 + +| 参数 | 类型 | 默认 | 说明 | +| ---- | ---- | ---- | ---- | +| format | string | HH:mm:ss | 格式化倒计时展示，参考moment | +| value | number | - | 数值内容 | +| prefix | string | - | 设置数值的前缀 | +| suffix | string | - | 设置数值的后缀 | +| valueStyle | CSSProperties | - | 设置数值的样式 | + +### d-countdown 事件 + +d-countdown 事件 + +| 事件 | 类型 | 说明 | +| ---- | ---- | ---- | +| onChange | ({leftTime,timeInitialValue,dateValue}) => void | 倒计时时间变化时触发。leftTime:倒计时剩余得时间戳；timeInitialValue：年月日时分秒毫秒格式倒计时；dateValue：根据format格式化后的值。 | +| onFinish | () => void | 倒计时完成时触发 | + -- Gitee From 9bad097c7da9f916b6e0257e417c1aaf1387ddb3 Mon Sep 17 00:00:00 2001 From: "heqinqin@300.cn" Date: Mon, 22 Nov 2021 23:30:54 +0800 Subject: [PATCH 2/5] =?UTF-8?q?feat(countdown):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=80=92=E8=AE=A1=E6=97=B6=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/countdown/src/countdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/countdown/src/countdown.tsx b/packages/devui-vue/devui/countdown/src/countdown.tsx index bd6d9fe4..9d9ad5d3 100644 --- a/packages/devui-vue/devui/countdown/src/countdown.tsx +++ b/packages/devui-vue/devui/countdown/src/countdown.tsx @@ -98,7 +98,7 @@ export default defineComponent({ onUnmounted(() => { - clearInterval(countdown) + clearInterval(countdown); }) return () => { -- Gitee From e392f2a339518342911f37d3d8ff5d8db700cca2 Mon Sep 17 00:00:00 2001 From: "heqinqin@300.cn" Date: Wed, 24 Nov 2021 18:47:11 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix(countdown):=20=E5=80=92=E8=AE=A1?= =?UTF-8?q?=E6=97=B6=E6=8F=92=E6=A7=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/countdown/src/countdown.scss | 26 ++++--- .../devui/countdown/src/countdown.tsx | 29 +++++--- .../docs/components/countdown/index.md | 69 +++++++++++++++++++ 3 files changed, 102 insertions(+), 22 deletions(-) diff --git a/packages/devui-vue/devui/countdown/src/countdown.scss b/packages/devui-vue/devui/countdown/src/countdown.scss index 6e81ae95..6b5e333f 100644 --- a/packages/devui-vue/devui/countdown/src/countdown.scss +++ b/packages/devui-vue/devui/countdown/src/countdown.scss @@ -1,16 +1,20 @@ -.devui-countdown { - font-size: 30px; - font-weight: bold; +@import '../../style/theme/color'; - span { - display: inline-block; - } +.devui-countdown { + .countdown-content { + font-size: 24px; + // font-weight: bold; + span { + color: $devui-text; + display: inline-block; + } - .countdown-prefix { - margin-right: 4px; - } + .countdown-prefix { + margin-right: 4px; + } - .countdown-suffix { - margin-left: 4px; + .countdown-suffix { + margin-left: 4px; + } } } diff --git a/packages/devui-vue/devui/countdown/src/countdown.tsx b/packages/devui-vue/devui/countdown/src/countdown.tsx index 9d9ad5d3..d26c641c 100644 --- a/packages/devui-vue/devui/countdown/src/countdown.tsx +++ b/packages/devui-vue/devui/countdown/src/countdown.tsx @@ -1,5 +1,5 @@ import { defineComponent, ref, onUnmounted } from 'vue' -import { countdownProps, CountdownProps, DateFormat } from './countdown-types' +import { countdownProps, CountdownProps } from './countdown-types' import './countdown.scss' export default defineComponent({ @@ -102,16 +102,23 @@ export default defineComponent({ }) return () => { - return (
- - { props.prefix } - - - {timeStr.value} - - - { props.suffix } - + return (
+ { + ctx.slots.default ? ctx.slots.default() : ( +
+ + { props.prefix } + + + {timeStr.value} + + + { props.suffix } + + +
+ ) + }
) } diff --git a/packages/devui-vue/docs/components/countdown/index.md b/packages/devui-vue/docs/components/countdown/index.md index 3b4f5447..6344adaa 100644 --- a/packages/devui-vue/docs/components/countdown/index.md +++ b/packages/devui-vue/docs/components/countdown/index.md @@ -81,6 +81,75 @@ export default defineComponent({ ``` ::: +### 插槽 +:::demo + +```vue + + + + + +``` +::: + ### d-countdown d-countdown 参数 -- Gitee From 8fdb1242f784bfb8272eeccbc6b24b2c35bec5a5 Mon Sep 17 00:00:00 2001 From: "heqinqin@300.cn" Date: Wed, 24 Nov 2021 18:50:32 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix(countdown):=20=E6=89=93=E5=8D=B0?= =?UTF-8?q?=E6=97=A5=E5=BF=97=E5=88=A0=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/countdown/index.ts | 2 +- packages/devui-vue/devui/countdown/src/countdown.scss | 2 +- packages/devui-vue/docs/components/countdown/index.md | 5 ----- 3 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/devui-vue/devui/countdown/index.ts b/packages/devui-vue/devui/countdown/index.ts index 904c2e07..d7064cb4 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: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '已完成', install(app: App): void { app.use(Countdown as any) } diff --git a/packages/devui-vue/devui/countdown/src/countdown.scss b/packages/devui-vue/devui/countdown/src/countdown.scss index 6b5e333f..33f18140 100644 --- a/packages/devui-vue/devui/countdown/src/countdown.scss +++ b/packages/devui-vue/devui/countdown/src/countdown.scss @@ -3,7 +3,7 @@ .devui-countdown { .countdown-content { font-size: 24px; - // font-weight: bold; + span { color: $devui-text; display: inline-block; diff --git a/packages/devui-vue/docs/components/countdown/index.md b/packages/devui-vue/docs/components/countdown/index.md index 6344adaa..67fce927 100644 --- a/packages/devui-vue/docs/components/countdown/index.md +++ b/packages/devui-vue/docs/components/countdown/index.md @@ -61,7 +61,6 @@ export default defineComponent({ const deadline = ref(new Date().getTime() + 369 * 24 * 60 * 60 *1000 + 5000); const changeTime = (n) => { - // console.log(n) } const finishTime = () => { } @@ -112,14 +111,10 @@ export default defineComponent({ const changeTime = ({dateValue, calculatingTime}) => { for (const k of dateValue.keys()) { - // console.log(k); if (k in leftTime) { leftTime[k] = dateValue.get(k); - // console.log(dateValue.get(k)) } } - // ++leftTime.Y - console.log(calculatingTime); } const finishTime = () => { } -- Gitee From 6e2cdb950856db2d605fad891f00ba5b293141d7 Mon Sep 17 00:00:00 2001 From: "heqinqin@300.cn" Date: Sun, 28 Nov 2021 23:57:44 +0800 Subject: [PATCH 5/5] =?UTF-8?q?fix(countdown):=20=E6=8A=BD=E5=8F=96?= =?UTF-8?q?=E5=B7=A5=E5=85=B7=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/countdown/index.ts | 2 +- .../devui/countdown/src/countdown.tsx | 95 ++++--------------- .../devui-vue/devui/countdown/src/utils.ts | 81 ++++++++++++++++ .../docs/components/countdown/index.md | 11 ++- 4 files changed, 109 insertions(+), 80 deletions(-) create mode 100644 packages/devui-vue/devui/countdown/src/utils.ts diff --git a/packages/devui-vue/devui/countdown/index.ts b/packages/devui-vue/devui/countdown/index.ts index d7064cb4..d3cf19a2 100644 --- a/packages/devui-vue/devui/countdown/index.ts +++ b/packages/devui-vue/devui/countdown/index.ts @@ -12,7 +12,7 @@ export default { category: '数据展示', status: '已完成', install(app: App): void { - app.use(Countdown as any) + app.use(Countdown as any) } } \ No newline at end of file diff --git a/packages/devui-vue/devui/countdown/src/countdown.tsx b/packages/devui-vue/devui/countdown/src/countdown.tsx index d26c641c..d5aec728 100644 --- a/packages/devui-vue/devui/countdown/src/countdown.tsx +++ b/packages/devui-vue/devui/countdown/src/countdown.tsx @@ -1,93 +1,41 @@ import { defineComponent, ref, onUnmounted } from 'vue' import { countdownProps, CountdownProps } from './countdown-types' import './countdown.scss' +import { getFormatTime, getLegalTime, getTimeSplit, getDeduplication, numFormat } from './utils' export default defineComponent({ name: 'DCountdown', props: countdownProps, emits: ['onChange', 'onFinish'], setup(props: CountdownProps, ctx) { - const fomatMap = new Map([['Y', 12], ['M', 30], ['D', 24], ['H', 60], ['m', 60], ['s', 1000], ['S', 1]]) - const timeInitialValue = new Map([['Y', 0], ['M', 0], ['D', 0], ['H', 0], ['m', 0], ['s', 0], ['S', 0]]); - const dateValue = new Map([['Y', 0], ['M', 0], ['D', 0], ['H', 0], ['m', 0], ['s', 0], ['S', 0]]) - const s = new Set([]); - const timeFormat: { k: string; n: number; }[] = [] + const s = getDeduplication(props.format); + const timeFormat = getTimeSplit(props.format); const timeStr = ref('') - const initFormat = () => { - const { format } = props; - const m = timeFormat; - for (let i = 0; i < format.length; i++) { - const k = format[i]; - if (m.length === 0 || m[m.length - 1].k !== k || !fomatMap.has(k)) { - m.push({ k, n: 1 }) - } else { - m[m.length - 1].n++ - } - if (fomatMap.has(k)) { - s.add(k) - } - } - } - const numFormat = (n: number, len: number) => { - const maxNum = 10 ** len - 1; - if (n >= maxNum) { - return n; - } else { - const carryLen = len - n.toString().length; - let str = '' - for (let i = 0; i < carryLen; i++) { - str += '0' - } - return str + n; - } - } - const getTime = () => { - const timediff = props.value - new Date().getTime(); - const leftTime = timediff > 0 ? timediff : 0 - const year = Math.floor(leftTime / (365 * 24 * 60 * 60 * 1000)); - const month = Math.floor(leftTime / (30 * 24 * 60 * 60 * 1000) % 12); - const day = Math.floor(leftTime / (24 * 60 * 60 * 1000) % 30); - const hour = Math.floor(leftTime / (60 * 60 * 1000) % 24); - const minute = Math.floor(leftTime / (60 * 1000) % 60); - const second = Math.floor(leftTime / 1000 % 60); - const millsecond = leftTime % 1000; - timeInitialValue.set('Y', year); - timeInitialValue.set('M', month); - timeInitialValue.set('D', day); - timeInitialValue.set('H', hour); - timeInitialValue.set('m', minute); - timeInitialValue.set('s', second); - timeInitialValue.set('S', millsecond); - let storage = 0; - for (const k of dateValue.keys()) { - if (s.has(k)) { - dateValue.set(k, timeInitialValue.get(k) + storage) - storage = 0; - } else { - storage += timeInitialValue.get(k) * fomatMap.get(k); - } - } - if(!s.has('S')) { - dateValue.set('s', Math.round(leftTime / 1000 % 60)) - } - + const getTimeStr = (legalTime: Map) => { + const fomatMap = new Set(['Y', 'M', 'D', 'H', 'm', 's', 'S']); const t = timeFormat.reduce((pre, cur) => { - if (timeInitialValue.has(cur.k)) { - return pre + numFormat(dateValue.get(cur.k), cur.n) + if (fomatMap.has(cur.k)) { + return pre + numFormat(legalTime.get(cur.k), cur.n) } return pre + cur.k; }, '') timeStr.value = t; + } + + const getTime = () => { + const leftTime = props.value > new Date().getTime() ? props.value - new Date().getTime() : 0 + const formatTime = getFormatTime(leftTime); + const legalTime = getLegalTime(s, formatTime); + !ctx.slots.default && getTimeStr(legalTime); ctx.emit('onChange', { leftTime, - timeInitialValue, - dateValue + formatTime, + legalTime }); return leftTime; } - initFormat(); - getTime(); + const countdown = setInterval(() => { const t = getTime(); if (t === 0) { @@ -96,26 +44,25 @@ export default defineComponent({ } }, s.has('S') ? 100 : 1000) - + getTime(); onUnmounted(() => { clearInterval(countdown); }) - + return () => { return (
{ ctx.slots.default ? ctx.slots.default() : (
- { props.prefix } + {props.prefix} {timeStr.value} - { props.suffix } + {props.suffix} -
) } diff --git a/packages/devui-vue/devui/countdown/src/utils.ts b/packages/devui-vue/devui/countdown/src/utils.ts new file mode 100644 index 00000000..e700f598 --- /dev/null +++ b/packages/devui-vue/devui/countdown/src/utils.ts @@ -0,0 +1,81 @@ + +export const getFormatTime = (leftTime: number): Map => { + const timeformat = new Map([['Y', 0], ['M', 0], ['D', 0], ['H', 0], ['m', 0], ['s', 0], ['S', 0]]); + const year = Math.floor(leftTime / (365 * 24 * 60 * 60 * 1000)); + const month = Math.floor(leftTime / (30 * 24 * 60 * 60 * 1000) % 12); + const day = Math.floor(leftTime / (24 * 60 * 60 * 1000) % 30); + const hour = Math.floor(leftTime / (60 * 60 * 1000) % 24); + const minute = Math.floor(leftTime / (60 * 1000) % 60); + const second = Math.floor(leftTime / 1000 % 60); + const millsecond = leftTime % 1000; + timeformat.set('Y', year); + timeformat.set('M', month); + timeformat.set('D', day); + timeformat.set('H', hour); + timeformat.set('m', minute); + timeformat.set('s', second); + timeformat.set('S', millsecond); + return timeformat; +} + +export const getLegalTime = (s: Set, timeformat: Map): Map => { + const dateValue = new Map([['Y', 0], ['M', 0], ['D', 0], ['H', 0], ['m', 0], ['s', 0], ['S', 0]]) + const m = new Map([['Y', 12], ['M', 30], ['D', 24], ['H', 60], ['m', 60], ['s', 1000], ['S', 1]]) + let storage = 0; + for (const k of dateValue.keys()) { + if (s.has(k)) { + dateValue.set(k, timeformat.get(k) + storage) + storage = 0; + } else { + storage += timeformat.get(k) * m.get(k); + } + } + if (!s.has('S') && timeformat.get('S') > 500) { + dateValue.set('s', dateValue.get('s') + 1); + } + return dateValue +} + + +interface ITimeSplit { + k: string + n: number +} +export const getTimeSplit = (format: string): ITimeSplit[] => { + const fomatMap = new Set(['Y', 'M', 'D', 'H', 'm', 's', 'S']); + const m: ITimeSplit[] = []; + for (let i = 0; i < format.length; i++) { + const k = format[i]; + if (m.length === 0 || m[m.length - 1].k !== k || !fomatMap.has(k)) { + m.push({ k, n: 1 }) + } else { + m[m.length - 1].n++ + } + } + return m; +} +export const getDeduplication = (format: string): Set => { + const fomatMap = new Set(['Y', 'M', 'D', 'H', 'm', 's', 'S']); + const s: Set = new Set(); + for (let i = 0; i < format.length; i++) { + const k = format[i]; + if (fomatMap.has(k)) { + s.add(k) + } + } + return s; +} + +export const numFormat = (n: number, len: number): number | string => { + const maxNum = 10 ** len - 1; + if (n >= maxNum) { + return n; + } else { + const carryLen = len - n.toString().length; + let str = '' + for (let i = 0; i < carryLen; i++) { + str += '0' + } + return str + n; + } +} \ No newline at end of file diff --git a/packages/devui-vue/docs/components/countdown/index.md b/packages/devui-vue/docs/components/countdown/index.md index 67fce927..af6b6a68 100644 --- a/packages/devui-vue/docs/components/countdown/index.md +++ b/packages/devui-vue/docs/components/countdown/index.md @@ -108,11 +108,11 @@ export default defineComponent({ const format = ref("HH:mm:ss"); const deadline = ref(new Date().getTime() + 10 * 24 * 60 * 60 *1000 + 5000); const leftTime = reactive({'H':0,'m':0,'s':0}) - const changeTime = ({dateValue, calculatingTime}) => { + const changeTime = ({legalTime}) => { - for (const k of dateValue.keys()) { + for (const k of legalTime.keys()) { if (k in leftTime) { - leftTime[k] = dateValue.get(k); + leftTime[k] = legalTime.get(k); } } } @@ -123,7 +123,8 @@ export default defineComponent({ deadline, leftTime, changeTime, - finishTime + finishTime, + format } } }) @@ -163,6 +164,6 @@ d-countdown 事件 | 事件 | 类型 | 说明 | | ---- | ---- | ---- | -| onChange | ({leftTime,timeInitialValue,dateValue}) => void | 倒计时时间变化时触发。leftTime:倒计时剩余得时间戳；timeInitialValue：年月日时分秒毫秒格式倒计时；dateValue：根据format格式化后的值。 | +| onChange | ({leftTime,formatTime,legalTime}) => void | 倒计时时间变化时触发。leftTime:倒计时剩余得时间戳；formatTime：年月日时分秒毫秒格式倒计时；legalTime：根据format格式化后的值。 | | onFinish | () => void | 倒计时完成时触发 | -- Gitee