feat(CountDown): support SS and S format (#5154)

src/count-down/README.md

@@ -42,7 +42,7 @@ export default {
 <van-count-down
   millisecond
   :time="time"
-  format="HH:mm:ss:SSS"
+  format="HH:mm:ss:SS"
 />
 ```
 
@@ -114,10 +114,22 @@ export default {
 | Attribute | Description | Type | Default | Version |
 |------|------|------|------|------|
 | time | Total time | *number* | - | - |
-| format | Time format，DD-day，HH-hour，mm-minute，ss-second，SSS-millisecond | *string* | `HH:mm:ss` | - |
+| format | Time format | *string* | `HH:mm:ss` | - |
 | auto-start | Whether to auto start count down | *boolean* | `true` | - |
 | millisecond | Whether to enable millisecond render | *boolean* | `false` | - |
 
+### Available formats
+
+| Format | Description |
+|------|------|
+| DD | Day |
+| HH | Hour |
+| mm | Minute |
+| ss | Second |
+| S | Millisecond, 1-digit |
+| SS | Millisecond, 2-digits |
+| SSS | Millisecond, 3-digits |
+
 ### Events
 
 | Event | Description | Arguments |

src/count-down/README.zh-CN.md

@@ -48,7 +48,7 @@ export default {
 <van-count-down
   millisecond
   :time="time"
-  format="HH:mm:ss:SSS"
+  format="HH:mm:ss:SS"
 />
 ```
 
@@ -124,10 +124,22 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | time | 倒计时时长，单位毫秒 | *number* | - | - |
-| format | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | *string* | `HH:mm:ss` | - |
+| format | 时间格式 | *string* | `HH:mm:ss` | - |
 | auto-start | 是否自动开始倒计时 | *boolean* | `true` | - |
 | millisecond | 是否开启毫秒级渲染 | *boolean* | `false` | - |
 
+### format 格式
+
+| 格式 | 说明 |
+|------|------|
+| DD | 天数 |
+| HH | 小时 |
+| mm | 分钟 |
+| ss | 秒数 |
+| S | 毫秒（1 位） |
+| SS | 毫秒（2 位） |
+| SSS | 毫秒（3 位） |
+
 ### Events
 
 | 事件名 | 说明 | 回调参数 |

src/count-down/demo/index.vue

@@ -15,7 +15,7 @@
       <van-count-down
         millisecond
         :time="time"
-        format="HH:mm:ss:SSS"
+        format="HH:mm:ss:SS"
       />
     </demo-block>
 

src/count-down/test/__snapshots__/index.spec.js.snap

@@ -5,3 +5,7 @@ exports[`complete format prop 1`] = `<div class="van-count-down">01-05-59-59-999
 exports[`disable auto-start prop 1`] = `<div class="van-count-down">100</div>`;
 
 exports[`incomplate format prop 1`] = `<div class="van-count-down">29-59-59-999</div>`;
+
+exports[`milliseconds format S 1`] = `<div class="van-count-down">01-5</div>`;
+
+exports[`milliseconds format SS 1`] = `<div class="van-count-down">01-50</div>`;

src/count-down/test/index.spec.js

@@ -141,6 +141,30 @@ test('complete format prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('milliseconds format SS', () => {
+  const wrapper = mount(CountDown, {
+    propsData: {
+      time: 1500,
+      autoStart: false,
+      format: 'ss-SS'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('milliseconds format S', () => {
+  const wrapper = mount(CountDown, {
+    propsData: {
+      time: 1500,
+      autoStart: false,
+      format: 'ss-S'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('incomplate format prop', () => {
   const wrapper = mount(CountDown, {
     propsData: {

src/count-down/utils.ts

@@ -57,7 +57,19 @@ export function parseFormat(format: string, timeData: TimeData): string {
     format = format.replace('ss', padZero(seconds));
   }
 
-  return format.replace('SSS', padZero(milliseconds, 3));
+  if (format.indexOf('S') !== -1) {
+    const ms = padZero(milliseconds, 3);
+
+    if (format.indexOf('SSS') !== -1) {
+      format = format.replace('SSS', ms);
+    } else if (format.indexOf('SS') !== -1) {
+      format = format.replace('SS', ms.slice(0, 2));
+    } else {
+      format = format.replace('S', ms.charAt(0));
+    }
+  }
+
+  return format;
 }
 
 export function isSameSecond(time1: number, time2: number): boolean {