Skip to content

Commit

Permalink
feat!: format 支持 ms 处理,补齐天时分秒毫秒输出的格式
Browse files Browse the repository at this point in the history
天数不补全,时分秒补全两位,毫秒补全三位
BREAKING CHANGE: 天数由补全两位更改为不补全
  • Loading branch information
shoyuf committed Oct 31, 2019
1 parent 80e01bb commit 68c8e96
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 21 deletions.
2 changes: 1 addition & 1 deletion docs/format.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ custom output format

```vue
<template>
<count-down :seconds="59" :days="1" format="dd天 hh:mm:ss" />
<count-down :seconds="59" :days="1" format="dd天 hh:mm:ss.ms" />
</template>
```
8 changes: 4 additions & 4 deletions src/count-down.vue
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,13 @@ export default {
},
/**
* Output format.
* Default: 'dd 天 hh 时 mm 分 ss 秒'. These dd, hh, mm & ss specifiers are optional.
* The default value will change according to whether there are days, hours, minutes & seconds,
* Default: 'dd 天 hh 时 mm 分 ss 秒'. These dd, hh, mm, ss & ms specifiers are optional.
* The default value will change according to whether there are days, hours, minutes, seconds & milliseconds,
* e.g., if user just pass minutes, then the default value will be 'mm 分 ss 秒'
*
* 输出格式。
* 默认值:'dd 天 hh 时 mm 分 ss 秒'。dd、hh、mm和ss标识符都是可选的
* 默认值会根据是否传入days, hours, minutes, seconds而变化
* 默认值:'dd 天 hh 时 mm 分 ss 秒'。dd、hh、mm、ss 和 ms 标识符都是可选的
* 默认值会根据是否传入days, hours, minutes, seconds 和 milliseconds而变化
* 比如用户只传了minutes,那么默认值就变为'mm 分 ss 秒'
*/
format: {
Expand Down
39 changes: 28 additions & 11 deletions src/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@ const formatSpecifiers = {
days: 'dd',
hours: 'hh',
minutes: 'mm',
seconds: 'ss'
seconds: 'ss',
milliseconds: 'ms'
}
const secondsIn = {
days: 60 * 60 * 24,
hours: 60 * 60,
minutes: 60,
seconds: 1
days: 60 * 60 * 24 * 1000,
hours: 60 * 60 * 1000,
minutes: 60 * 1000,
seconds: 1 * 1000,
milliseconds: 1
}

/**
Expand All @@ -34,8 +36,25 @@ function padStart(str, len, v) {
return str
}

function padZero(str) {
return padStart(str + '', 2, '0')
function padZero(str, padRange = 2) {
return padStart(str + '', padRange, '0')
}

/**
* 天、小时、分钟、秒、毫秒格式化
* @param {string} key
* @param {number} value
* @returns {string}
*/
function timeFormatter(key, value) {
// 天数不格式化,时分秒两位,毫秒三位
if (key === 'hours' || key === 'minutes' || key === 'seconds') {
return padZero(value)
} else if (key === 'milliseconds') {
return padZero(value, 3)
} else {
return value.toString()
}
}

export function toMilliseconds({
Expand All @@ -55,13 +74,12 @@ export function toMilliseconds({
*/
export function formatTime(time, format) {
let result = format
time = Math.ceil(time / 1000)
// 注意顺序很重要。要先从大的时间单位开始构造字符串
entries(formatSpecifiers).forEach(([k, specifier]) => {
if (includes(result, specifier)) {
const v = Math.floor(time / secondsIn[k])
time -= v * secondsIn[k]
result = result.replace(specifier, padZero(v))
result = result.replace(specifier, timeFormatter(k, v))
}
})
return result
Expand All @@ -73,8 +91,7 @@ export function formatTime(time, format) {
* @return 数据对象,包含days, hours, minutes, seconds & milliseconds字段
*/
export function toTimeData(time) {
const timeData = {milliseconds: time % 1000}
time /= 1000
const timeData = {}
entries(secondsIn).forEach(([k, v]) => {
timeData[k] = Math.floor(time / v)
time -= timeData[k] * v
Expand Down
12 changes: 7 additions & 5 deletions test/util.test.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
import {formatTime, toTimeData, toMilliseconds} from '../src/util'

describe('formatTime', () => {
test('正确解析日时分秒', () => {
test('正确解析日时分秒毫秒', () => {
const t = toMilliseconds({
days: 2,
hours: 3,
minutes: 4,
seconds: 5
seconds: 5,
milliseconds: 1
})
expect(formatTime(t, 'ddhhmmss')).toBe('02030405')
expect(formatTime(t, 'ddhhmmssms')).toBe('2030405001')
const t2 = toMilliseconds({
days: 2,
hours: 33,
minutes: 4,
seconds: -5
seconds: -5,
milliseconds: 1
})
expect(formatTime(t2, 'ddhhmmss')).toBe('03090355')
expect(formatTime(t2, 'ddhhmmssms')).toBe('3090355001')
})
test('format仅传部分占位符的情况', () => {
const t = toMilliseconds({
Expand Down

0 comments on commit 68c8e96

Please sign in to comment.