feat(milliseconds): 支持毫秒倒计时 #6

shoyuf · 2019-11-01T03:53:55Z

Why

使用过程中发现的几个问题

feat: format 支持 ms 处理，补齐天时分秒毫秒输出的格式
props 没有支持到 millisecond

How

Detail in commits 🤙

Test

dev...shoyuf:dev#diff-d5a5c858fb7261c905d152bd5ed0c9d2

Docs

Already changed in api documents

netlify · 2019-11-01T03:54:55Z

Deploy preview for femessage-count-down ready!

Built with commit b6a97bd

https://deploy-preview-6--femessage-count-down.netlify.com

levy9527 · 2019-11-04T06:26:27Z

1.为何会有 breaking change
2.时间戳同时支持10位与13位是出于什么考虑。

shoyuf · 2019-11-04T12:05:38Z

1.为何会有 breaking change
2.时间戳同时支持10位与13位是出于什么考虑。

https://github.com/FEMessage/count-down/pull/6/files#diff-34a6d62af0cf0b784f8444529f3130efR56

timeFormatter 没有对天数进行格式化，之前一位的天数会自动在前面添加0，而现在表现为不自动加0

时间戳支持10和13位出于对服务端返回的秒和毫秒两种类型时间戳进行兼容

donaldshen · 2019-11-05T13:43:27Z

docs/timestamp.md

@@ -0,0 +1,5 @@
+```vue
+<template>
+  <count-down :timestamp="(()=>new Date().getTime() + 3600000)()" />


假设服务器传的是截止时间戳，那么传:seconds="(timestamp - Date.now()) / 1000"即可

Good idea !

donaldshen · 2019-11-05T13:44:19Z

src/count-down.vue

+      default: 0,
+      validator(e) {
+        const len = e.toString().length
+        if (len === 13 || len === 10) {


0到13位都有可能呀

donaldshen · 2019-11-05T13:45:19Z

src/util.js

-  hours: 60 * 60,
-  minutes: 60,
-  seconds: 1
+  days: 60 * 60 * 24 * 1000,


如果都乘以1000，那么名字就该叫millisecondsIn了……

donaldshen · 2019-11-05T13:48:52Z

src/count-down.vue

+    /**
+     * remain milliseconds
+     */
+    milliseconds: {


这个可以有

之前没有加毫秒的考虑是：已经有:seconds="time / 1000"这种写法了；再加个:milliseconds="time"似乎没有节省字符数……

donaldshen · 2019-11-05T13:49:48Z

src/util.js

+ * @param {number} timestamp - 时间戳
+ * @returns {number} 时间对象到毫秒转化结果
+ */
+export function toMilliseconds(


这个函数现在藏了两套完全不同的逻辑。

donaldshen · 2019-11-05T13:54:48Z

src/util.js

+ */
+function timeFormatter(key, value) {
+  // 天数不格式化，时分秒两位，毫秒三位
+  if (key === 'hours' || key === 'minutes' || key === 'seconds') {


days没有处理。似乎是你有意的，为啥哩

我觉得天数没必要补0处理

donaldshen

建议保留milliseconds这个prop，其他像timestamp这样的改动就没必要了

donaldshen · 2019-11-06T02:16:43Z

src/util.js

  entries(secondsIn).forEach(([k, v]) => {
-    timeData[k] = Math.floor(time / v)
-    time -= timeData[k] * v
+    timeData[k] = timeFormatter(k, Math.floor(time / v))


slot的用途是方便用户自定义处理倒计时数据的，所以会传原始数据。补了0变成字符串，定制就麻烦了些

shoyuf · 2019-11-06T02:25:08Z

format 和 slot 表现的结果不一致（slot 内的时间数据没有补齐）
slot 内的 hours, minutes, seconds, milliseconds 补齐（同时避免毫秒在有背景色的情况下显示宽度一直在抖动）

这两个commit需要讨论一下

第一个问题包含两个问题
1. format prop 不支持ms
2. 之前使用format prop和slot，在相同传入参数情况下，表现结果不一致

案例：

<count-down :seconds="59" :days="1" format="dd天 hh:mm:ss.ms" />

修改前输出 01天 00:00:59
修改后输出 1天 00:00:59.000

<count-down :seconds="59" :days="1">
<template v-slot="{days,hours,minutes,seconds,milliseconds}">
{{`${days}天 ${hours}:${minutes}:${seconds}.${milliseconds}`}}
</template>
</count-down>

修改前输出：1天 0: 0:59.0
修改后输出：1天 00: 00:59.000

第二个问题如图，时分秒在降到个位数时宽度不易控制，但主要问题还是第一个问题的不一致情况

lianghx-319 · 2019-11-06T02:33:23Z

format 和 slot 表现的结果不一致（slot 内的时间数据没有补齐）

slot 内的 hours, minutes, seconds, milliseconds 补齐（同时避免毫秒在有背景色的情况下显示宽度一直在抖动）

这两个commit需要讨论一下

第一个问题包含两个问题

format prop 不支持ms

之前使用format prop和slot，在相同传入参数情况下，表现结果不一致

案例：
<count-down :seconds="59" :days="1" format="dd天 hh:mm:ss.ms" />
修改前输出 01天 00:00:59
修改后输出 1天 00:00:59.000
<count-down :seconds="59" :days="1">
<template v-slot="{days,hours,minutes,seconds,milliseconds}">
{{`${days}天 ${hours}:${minutes}:${seconds}.${milliseconds}`}}
</template>
</count-down>
修改前输出：1天 0: 0:59.0
修改后输出：1天 00: 00:59.000

第二个问题如图，时分秒在降到个位数时宽度不易控制，但主要问题还是第一个问题的不一致情况

ms 的 props 可以确认增加的
slot 原则上还是传源数据，需要处理补零的话，其实可以在外部用 filter。

天数、时、分、秒补全两位，毫秒补全三位

levy9527 · 2019-11-06T07:29:34Z

@all-contributors add @shoyuf code

allcontributors · 2019-11-06T07:29:44Z

@levy9527

I've put up a pull request to add @shoyuf! 🎉

auto-add-label bot added the enhancement New feature or request label Nov 1, 2019

donaldshen reviewed Nov 5, 2019

View reviewed changes

donaldshen suggested changes Nov 5, 2019

View reviewed changes

donaldshen reviewed Nov 6, 2019

View reviewed changes

shoyuf force-pushed the dev branch from 2c577d7 to e437bf9 Compare November 6, 2019 04:42

shoyuf added 2 commits November 6, 2019 15:04

feat: format 支持 ms 处理，补齐毫秒输出的格式

da1735f

天数、时、分、秒补全两位，毫秒补全三位

feat: 组件传入 prop 支持 milliseconds

b6a97bd

shoyuf force-pushed the dev branch from e437bf9 to b6a97bd Compare November 6, 2019 07:04

donaldshen approved these changes Nov 6, 2019

View reviewed changes

levy9527 changed the title ~~feat: 一些小改进~~ feat(milliseconds): 支持毫秒倒计时 Nov 6, 2019

allcontributors bot mentioned this pull request Nov 6, 2019

docs: add shoyuf as a contributor #7

Merged

levy9527 merged commit cd712c6 into FEMessage:dev Nov 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(milliseconds): 支持毫秒倒计时 #6

feat(milliseconds): 支持毫秒倒计时 #6

shoyuf commented Nov 1, 2019 •

edited by levy9527

Loading

netlify bot commented Nov 1, 2019 •

edited

Loading

levy9527 commented Nov 4, 2019 •

edited

Loading

shoyuf commented Nov 4, 2019

donaldshen Nov 5, 2019

shoyuf Nov 6, 2019

donaldshen Nov 5, 2019 •

edited

Loading

donaldshen Nov 5, 2019

donaldshen Nov 5, 2019

donaldshen Nov 6, 2019

donaldshen Nov 5, 2019

donaldshen Nov 5, 2019 •

edited

Loading

shoyuf Nov 6, 2019

donaldshen left a comment

donaldshen Nov 6, 2019

shoyuf commented Nov 6, 2019

lianghx-319 commented Nov 6, 2019

levy9527 commented Nov 6, 2019

allcontributors bot commented Nov 6, 2019

feat(milliseconds): 支持毫秒倒计时 #6

feat(milliseconds): 支持毫秒倒计时 #6

Conversation

shoyuf commented Nov 1, 2019 • edited by levy9527 Loading

Why

How

Test

Docs

netlify bot commented Nov 1, 2019 • edited Loading

levy9527 commented Nov 4, 2019 • edited Loading

shoyuf commented Nov 4, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

donaldshen Nov 5, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

donaldshen Nov 5, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

donaldshen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shoyuf commented Nov 6, 2019

lianghx-319 commented Nov 6, 2019

levy9527 commented Nov 6, 2019

allcontributors bot commented Nov 6, 2019

shoyuf commented Nov 1, 2019 •

edited by levy9527

Loading

netlify bot commented Nov 1, 2019 •

edited

Loading

levy9527 commented Nov 4, 2019 •

edited

Loading

donaldshen Nov 5, 2019 •

edited

Loading

donaldshen Nov 5, 2019 •

edited

Loading