From 48c72206f6a9d870ba2ffd8fb94a7e274085ced1 Mon Sep 17 00:00:00 2001
From: mrayi <1078464063@qq.com>
Date: Tue, 16 Apr 2024 14:56:01 +0800
Subject: [PATCH] refactor(countdown): move to script setup (#3018)

---
 src/config.json                               |   1 +
 .../__VUE/countdown/countdown.taro.vue        | 176 +++++++++++
 src/packages/__VUE/countdown/countdown.vue    | 176 +++++++++++
 src/packages/__VUE/countdown/doc.en-US.md     |  11 +
 src/packages/__VUE/countdown/doc.md           |  11 +
 src/packages/__VUE/countdown/doc.taro.md      |  11 +
 src/packages/__VUE/countdown/index.taro.ts    |  11 +
 src/packages/__VUE/countdown/index.taro.vue   | 284 ------------------
 src/packages/__VUE/countdown/index.ts         |  11 +
 src/packages/__VUE/countdown/index.vue        | 284 ------------------
 src/packages/__VUE/countdown/util.ts          |  70 +++++
 11 files changed, 478 insertions(+), 568 deletions(-)
 create mode 100644 src/packages/__VUE/countdown/countdown.taro.vue
 create mode 100644 src/packages/__VUE/countdown/countdown.vue
 create mode 100644 src/packages/__VUE/countdown/index.taro.ts
 delete mode 100644 src/packages/__VUE/countdown/index.taro.vue
 create mode 100644 src/packages/__VUE/countdown/index.ts
 delete mode 100644 src/packages/__VUE/countdown/index.vue

diff --git a/src/config.json b/src/config.json
index 06c9ad53a1..2fe8e48770 100644
--- a/src/config.json
+++ b/src/config.json
@@ -703,6 +703,7 @@
         {
           "name": "Countdown",
           "cName": "倒计时",
+          "setup": true,
           "desc": "倒计时",
           "author": "yangxiaolu"
         },
diff --git a/src/packages/__VUE/countdown/countdown.taro.vue b/src/packages/__VUE/countdown/countdown.taro.vue
new file mode 100644
index 0000000000..4273802683
--- /dev/null
+++ b/src/packages/__VUE/countdown/countdown.taro.vue
@@ -0,0 +1,176 @@
+<template>
+  <view class="nut-countdown">
+    <slot>
+      <view class="nut-countdown__content" v-html="renderTime"></view>
+    </slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onBeforeMount } from 'vue'
+import { getTimeStamp, formatRemainTime } from './util'
+
+defineOptions({
+  name: 'NutCountdown'
+})
+
+export type CountdownProps = Partial<{
+  modelValue: Record<string, string>
+  paused: boolean
+  startTime: number | string
+  endTime: number | string
+  millisecond: boolean
+  format: string
+  autoStart: boolean
+  time: number | string
+}>
+
+const props = withDefaults(defineProps<CountdownProps>(), {
+  paused: false,
+  startTime: '',
+  endTime: '',
+  millisecond: false,
+  format: 'HH:mm:ss',
+  autoStart: true,
+  time: 0
+})
+
+const emit = defineEmits([
+  'input',
+  'update:modelValue',
+  'end',
+  'restart',
+  'paused',
+  // will be deprecated
+  'onEnd',
+  'onRestart',
+  'onPaused'
+])
+
+// 倒计时剩余时间时间
+const restTime = ref(0)
+const timer = ref<null | number>(null)
+const counting = ref(!props.paused && props.autoStart)
+const handleEndTime = ref(Date.now())
+// 设置了 startTime 时，与 date.now() 的差异
+const diffTime = ref(0)
+
+const renderTime = computed(() => {
+  return formatRemainTime(restTime.value, props.format)
+})
+
+// 倒计时 interval
+const initTime = () => {
+  handleEndTime.value = Number(props.endTime)
+  diffTime.value = Date.now() - getTimeStamp(props.startTime) // 时间差
+  if (!counting.value) counting.value = true
+  tick()
+}
+
+const tick = () => {
+  if (window !== undefined) {
+    timer.value = requestAnimationFrame(() => {
+      if (counting.value) {
+        const currentTime = Date.now() - diffTime.value
+        const remainTime = Math.max(handleEndTime.value - currentTime, 0)
+
+        restTime.value = remainTime
+
+        if (!remainTime) {
+          counting.value = false
+          pause()
+          emit('end')
+          emit('onEnd')
+        }
+
+        if (remainTime > 0) {
+          tick()
+        }
+      }
+    })
+  }
+}
+
+// 开始
+const start = () => {
+  if (!counting.value && !props.autoStart) {
+    counting.value = true
+    handleEndTime.value = Date.now() + Number(restTime.value)
+    tick()
+    emit('restart', restTime.value)
+    emit('onRestart', restTime.value)
+  }
+}
+// 暂定
+const pause = () => {
+  cancelAnimationFrame(timer.value!)
+  counting.value = false
+  emit('restart', restTime.value)
+  emit('onRestart', restTime.value)
+}
+
+// 重置
+const reset = () => {
+  if (!props.autoStart) {
+    pause()
+    restTime.value = Number(props.time)
+  }
+}
+
+defineExpose({
+  start,
+  pause,
+  reset
+})
+
+onBeforeMount(() => {
+  if (props.autoStart) {
+    initTime()
+  } else {
+    restTime.value = Number(props.time)
+  }
+})
+
+watch(
+  () => restTime.value,
+  (value) => {
+    const tranTime = formatRemainTime(value, props.format, 'custom')
+    emit('update:modelValue', tranTime)
+    emit('input', tranTime)
+  }
+)
+
+watch(
+  () => props.paused,
+  (v, ov) => {
+    if (!ov) {
+      if (counting.value) {
+        pause()
+      }
+    } else {
+      if (!counting.value) {
+        counting.value = true
+        handleEndTime.value = Date.now() + Number(restTime.value)
+        tick()
+      }
+      emit('restart', restTime.value)
+      emit('onRestart', restTime.value)
+    }
+  }
+)
+
+watch(
+  () => props.endTime,
+  () => {
+    initTime()
+  }
+)
+
+watch(
+  () => props.startTime,
+  () => {
+    initTime()
+  }
+)
+
+</script>
diff --git a/src/packages/__VUE/countdown/countdown.vue b/src/packages/__VUE/countdown/countdown.vue
new file mode 100644
index 0000000000..4273802683
--- /dev/null
+++ b/src/packages/__VUE/countdown/countdown.vue
@@ -0,0 +1,176 @@
+<template>
+  <view class="nut-countdown">
+    <slot>
+      <view class="nut-countdown__content" v-html="renderTime"></view>
+    </slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onBeforeMount } from 'vue'
+import { getTimeStamp, formatRemainTime } from './util'
+
+defineOptions({
+  name: 'NutCountdown'
+})
+
+export type CountdownProps = Partial<{
+  modelValue: Record<string, string>
+  paused: boolean
+  startTime: number | string
+  endTime: number | string
+  millisecond: boolean
+  format: string
+  autoStart: boolean
+  time: number | string
+}>
+
+const props = withDefaults(defineProps<CountdownProps>(), {
+  paused: false,
+  startTime: '',
+  endTime: '',
+  millisecond: false,
+  format: 'HH:mm:ss',
+  autoStart: true,
+  time: 0
+})
+
+const emit = defineEmits([
+  'input',
+  'update:modelValue',
+  'end',
+  'restart',
+  'paused',
+  // will be deprecated
+  'onEnd',
+  'onRestart',
+  'onPaused'
+])
+
+// 倒计时剩余时间时间
+const restTime = ref(0)
+const timer = ref<null | number>(null)
+const counting = ref(!props.paused && props.autoStart)
+const handleEndTime = ref(Date.now())
+// 设置了 startTime 时，与 date.now() 的差异
+const diffTime = ref(0)
+
+const renderTime = computed(() => {
+  return formatRemainTime(restTime.value, props.format)
+})
+
+// 倒计时 interval
+const initTime = () => {
+  handleEndTime.value = Number(props.endTime)
+  diffTime.value = Date.now() - getTimeStamp(props.startTime) // 时间差
+  if (!counting.value) counting.value = true
+  tick()
+}
+
+const tick = () => {
+  if (window !== undefined) {
+    timer.value = requestAnimationFrame(() => {
+      if (counting.value) {
+        const currentTime = Date.now() - diffTime.value
+        const remainTime = Math.max(handleEndTime.value - currentTime, 0)
+
+        restTime.value = remainTime
+
+        if (!remainTime) {
+          counting.value = false
+          pause()
+          emit('end')
+          emit('onEnd')
+        }
+
+        if (remainTime > 0) {
+          tick()
+        }
+      }
+    })
+  }
+}
+
+// 开始
+const start = () => {
+  if (!counting.value && !props.autoStart) {
+    counting.value = true
+    handleEndTime.value = Date.now() + Number(restTime.value)
+    tick()
+    emit('restart', restTime.value)
+    emit('onRestart', restTime.value)
+  }
+}
+// 暂定
+const pause = () => {
+  cancelAnimationFrame(timer.value!)
+  counting.value = false
+  emit('restart', restTime.value)
+  emit('onRestart', restTime.value)
+}
+
+// 重置
+const reset = () => {
+  if (!props.autoStart) {
+    pause()
+    restTime.value = Number(props.time)
+  }
+}
+
+defineExpose({
+  start,
+  pause,
+  reset
+})
+
+onBeforeMount(() => {
+  if (props.autoStart) {
+    initTime()
+  } else {
+    restTime.value = Number(props.time)
+  }
+})
+
+watch(
+  () => restTime.value,
+  (value) => {
+    const tranTime = formatRemainTime(value, props.format, 'custom')
+    emit('update:modelValue', tranTime)
+    emit('input', tranTime)
+  }
+)
+
+watch(
+  () => props.paused,
+  (v, ov) => {
+    if (!ov) {
+      if (counting.value) {
+        pause()
+      }
+    } else {
+      if (!counting.value) {
+        counting.value = true
+        handleEndTime.value = Date.now() + Number(restTime.value)
+        tick()
+      }
+      emit('restart', restTime.value)
+      emit('onRestart', restTime.value)
+    }
+  }
+)
+
+watch(
+  () => props.endTime,
+  () => {
+    initTime()
+  }
+)
+
+watch(
+  () => props.startTime,
+  () => {
+    initTime()
+  }
+)
+
+</script>
diff --git a/src/packages/__VUE/countdown/doc.en-US.md b/src/packages/__VUE/countdown/doc.en-US.md
index 97a4c27514..9504089575 100644
--- a/src/packages/__VUE/countdown/doc.en-US.md
+++ b/src/packages/__VUE/countdown/doc.en-US.md
@@ -90,6 +90,17 @@ Paused and restarted the countdown with the `paused` attribute
 | pause | Count Down Pause |
 | reset | Count Down Reset |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  CountdownProps,
+  CountdownInstance
+} from '@nutui/nutui'
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/countdown/doc.md b/src/packages/__VUE/countdown/doc.md
index 918eb93de9..ddf0ea287f 100644
--- a/src/packages/__VUE/countdown/doc.md
+++ b/src/packages/__VUE/countdown/doc.md
@@ -92,6 +92,17 @@ app.use(Countdown)
 | pause | 暂停倒计时 |
 | reset | 重设倒计时，若 `auto-start`为 `true`，重设后会自动开始倒计时 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  CountdownProps,
+  CountdownInstance
+} from '@nutui/nutui'
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/countdown/doc.taro.md b/src/packages/__VUE/countdown/doc.taro.md
index 22929d8390..31b311ca8f 100644
--- a/src/packages/__VUE/countdown/doc.taro.md
+++ b/src/packages/__VUE/countdown/doc.taro.md
@@ -92,6 +92,17 @@ app.use(Countdown)
 | pause | 暂停倒计时 |
 | reset | 重设倒计时，若 `auto-start`为 `true`，重设后会自动开始倒计时 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  CountdownProps,
+  CountdownInstance
+} from '@nutui/nutui-taro'
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/countdown/index.taro.ts b/src/packages/__VUE/countdown/index.taro.ts
new file mode 100644
index 0000000000..948203c624
--- /dev/null
+++ b/src/packages/__VUE/countdown/index.taro.ts
@@ -0,0 +1,11 @@
+import Countdown from './countdown.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Countdown)
+
+export type { CountdownProps } from './countdown.taro.vue'
+
+export type CountdownInstance = ComponentPublicInstance & InstanceType<typeof Countdown>
+
+export { Countdown, Countdown as default }
diff --git a/src/packages/__VUE/countdown/index.taro.vue b/src/packages/__VUE/countdown/index.taro.vue
deleted file mode 100644
index eb29b02160..0000000000
--- a/src/packages/__VUE/countdown/index.taro.vue
+++ /dev/null
@@ -1,284 +0,0 @@
-<template>
-  <view class="nut-countdown">
-    <template v-if="slots.default">
-      <slot></slot>
-    </template>
-    <template v-else>
-      <view class="nut-countdown__content" v-html="renderTime"></view>
-    </template>
-  </view>
-</template>
-<script lang="ts">
-import { toRefs, computed, watch, reactive, onBeforeMount } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import { getTimeStamp } from './util'
-import { padZero } from '@/packages/utils/util'
-import { useLocale } from '@/packages/utils/useLocale'
-
-const { create } = createComponent('countdown')
-const cN = 'NutCountdown'
-
-export default create({
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    paused: {
-      default: false,
-      type: Boolean
-    },
-
-    startTime: {
-      // 可以是服务器当前时间
-      type: [Number, String],
-      validator(v: Date) {
-        const dateStr = new Date(v).toString().toLowerCase()
-        return dateStr !== 'invalid date'
-      }
-    },
-    endTime: {
-      type: [Number, String],
-      validator(v: Date) {
-        const dateStr = new Date(v).toString().toLowerCase()
-        return dateStr !== 'invalid date'
-      }
-    },
-    // 是否开启毫秒
-    millisecond: {
-      default: false,
-      type: Boolean
-    },
-    // 时间格式化
-    format: {
-      type: String,
-      default: 'HH:mm:ss'
-    },
-    autoStart: {
-      type: Boolean,
-      default: true
-    },
-
-    // 倒计时时长，单位毫秒
-    time: {
-      type: [Number, String],
-      default: 0
-    }
-  },
-  emits: [
-    'input',
-    'update:modelValue',
-    'end',
-    'restart',
-    'paused',
-    // will be deprecated
-    'onEnd',
-    'onRestart',
-    'onPaused'
-  ],
-
-  setup(props, { emit, slots }) {
-    const translate = useLocale(cN)
-    const state = reactive({
-      restTime: 0, // 倒计时剩余时间时间
-      timer: null,
-      counting: !props.paused && props.autoStart, // 是否处于倒计时中
-      handleEndTime: Date.now(), // 最终截止时间
-      diffTime: 0 // 设置了 startTime 时，与 date.now() 的差异
-    })
-
-    const renderTime = computed(() => {
-      return formatRemainTime(state.restTime)
-    })
-
-    // 倒计时 interval
-    const initTime = () => {
-      state.handleEndTime = Number(props.endTime)
-      state.diffTime = Date.now() - getTimeStamp(props.startTime) // 时间差
-      if (!state.counting) state.counting = true
-      tick()
-    }
-
-    const tick = () => {
-      if (window !== undefined) {
-        (state.timer as any) = requestAnimationFrame(() => {
-          if (state.counting) {
-            const currentTime = Date.now() - state.diffTime
-            const remainTime = Math.max(state.handleEndTime - currentTime, 0)
-
-            state.restTime = remainTime
-
-            if (!remainTime) {
-              state.counting = false
-              pause()
-              emit('end')
-              emit('onEnd')
-            }
-
-            if (remainTime > 0) {
-              tick()
-            }
-          }
-        })
-      }
-    }
-
-    // 将倒计时剩余时间格式化   参数： t  时间戳  type custom 自定义类型
-    const formatRemainTime = (t: number, type?: string) => {
-      const ts = t
-      let rest = {
-        d: 0,
-        h: 0,
-        m: 0,
-        s: 0,
-        ms: 0
-      }
-
-      const SECOND = 1000
-      const MINUTE = 60 * SECOND
-      const HOUR = 60 * MINUTE
-      const DAY = 24 * HOUR
-
-      if (ts > 0) {
-        rest.d = ts >= SECOND ? Math.floor(ts / DAY) : 0
-        rest.h = Math.floor((ts % DAY) / HOUR)
-        rest.m = Math.floor((ts % HOUR) / MINUTE)
-        rest.s = Math.floor((ts % MINUTE) / SECOND)
-        rest.ms = Math.floor(ts % SECOND)
-      }
-
-      return type == 'custom' ? rest : parseFormat({ ...rest })
-    }
-
-    const parseFormat = (time: { d: number, h: number, m: number, s: number, ms: number }) => {
-      let { d, h, m, s, ms } = time
-      let format = props.format
-
-      if (format.includes('DD')) {
-        format = format.replace('DD', padZero(d))
-      } else {
-        h += Number(d) * 24
-      }
-
-      if (format.includes('HH')) {
-        format = format.replace('HH', padZero(h))
-      } else {
-        m += Number(h) * 60
-      }
-
-      if (format.includes('mm')) {
-        format = format.replace('mm', padZero(m))
-      } else {
-        s += Number(m) * 60
-      }
-
-      if (format.includes('ss')) {
-        format = format.replace('ss', padZero(s))
-      } else {
-        ms += Number(s) * 1000
-      }
-
-      if (format.includes('S')) {
-        const msC = padZero(ms, 3).toString()
-
-        if (format.includes('SSS')) {
-          format = format.replace('SSS', msC)
-        } else if (format.includes('SS')) {
-          format = format.replace('SS', msC.slice(0, 2))
-        } else if (format.includes('S')) {
-          format = format.replace('S', msC.slice(0, 1))
-        }
-      }
-      return format
-    }
-
-    // 开始
-    const start = () => {
-      if (!state.counting && !props.autoStart) {
-        state.counting = true
-        state.handleEndTime = Date.now() + Number(state.restTime)
-        tick()
-        emit('restart', state.restTime)
-        emit('onRestart', state.restTime)
-      }
-    }
-    // 暂定
-    const pause = () => {
-      cancelAnimationFrame(state.timer as any)
-      state.counting = false
-      emit('paused', state.restTime)
-      emit('onPaused', state.restTime)
-    }
-
-    // 重置
-    const reset = () => {
-      if (!props.autoStart) {
-        pause()
-        state.restTime = Number(props.time)
-      }
-    }
-
-    onBeforeMount(() => {
-      if (props.autoStart) {
-        initTime()
-      } else {
-        state.restTime = Number(props.time)
-      }
-    })
-
-    watch(
-      () => state.restTime,
-      (value) => {
-        let tranTime = formatRemainTime(value, 'custom')
-        emit('update:modelValue', tranTime)
-        emit('input', tranTime)
-      }
-    )
-
-    watch(
-      () => props.paused,
-      (v, ov) => {
-        if (!ov) {
-          if (state.counting) {
-            pause()
-          }
-        } else {
-          if (!state.counting) {
-            state.counting = true
-            state.handleEndTime = Date.now() + Number(state.restTime)
-            tick()
-          }
-          emit('restart', state.restTime)
-          emit('onRestart', state.restTime)
-        }
-      }
-    )
-
-    watch(
-      () => props.endTime,
-      () => {
-        initTime()
-      }
-    )
-
-    watch(
-      () => props.startTime,
-      () => {
-        initTime()
-      }
-    )
-
-    return {
-      ...toRefs(props),
-      slots,
-      start,
-      pause,
-      renderTime,
-      translate,
-      reset
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/countdown/index.ts b/src/packages/__VUE/countdown/index.ts
new file mode 100644
index 0000000000..5fc5167282
--- /dev/null
+++ b/src/packages/__VUE/countdown/index.ts
@@ -0,0 +1,11 @@
+import Countdown from './countdown.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Countdown)
+
+export type { CountdownProps } from './countdown.vue'
+
+export type CountdownInstance = ComponentPublicInstance & InstanceType<typeof Countdown>
+
+export { Countdown, Countdown as default }
diff --git a/src/packages/__VUE/countdown/index.vue b/src/packages/__VUE/countdown/index.vue
deleted file mode 100644
index eb29b02160..0000000000
--- a/src/packages/__VUE/countdown/index.vue
+++ /dev/null
@@ -1,284 +0,0 @@
-<template>
-  <view class="nut-countdown">
-    <template v-if="slots.default">
-      <slot></slot>
-    </template>
-    <template v-else>
-      <view class="nut-countdown__content" v-html="renderTime"></view>
-    </template>
-  </view>
-</template>
-<script lang="ts">
-import { toRefs, computed, watch, reactive, onBeforeMount } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import { getTimeStamp } from './util'
-import { padZero } from '@/packages/utils/util'
-import { useLocale } from '@/packages/utils/useLocale'
-
-const { create } = createComponent('countdown')
-const cN = 'NutCountdown'
-
-export default create({
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    paused: {
-      default: false,
-      type: Boolean
-    },
-
-    startTime: {
-      // 可以是服务器当前时间
-      type: [Number, String],
-      validator(v: Date) {
-        const dateStr = new Date(v).toString().toLowerCase()
-        return dateStr !== 'invalid date'
-      }
-    },
-    endTime: {
-      type: [Number, String],
-      validator(v: Date) {
-        const dateStr = new Date(v).toString().toLowerCase()
-        return dateStr !== 'invalid date'
-      }
-    },
-    // 是否开启毫秒
-    millisecond: {
-      default: false,
-      type: Boolean
-    },
-    // 时间格式化
-    format: {
-      type: String,
-      default: 'HH:mm:ss'
-    },
-    autoStart: {
-      type: Boolean,
-      default: true
-    },
-
-    // 倒计时时长，单位毫秒
-    time: {
-      type: [Number, String],
-      default: 0
-    }
-  },
-  emits: [
-    'input',
-    'update:modelValue',
-    'end',
-    'restart',
-    'paused',
-    // will be deprecated
-    'onEnd',
-    'onRestart',
-    'onPaused'
-  ],
-
-  setup(props, { emit, slots }) {
-    const translate = useLocale(cN)
-    const state = reactive({
-      restTime: 0, // 倒计时剩余时间时间
-      timer: null,
-      counting: !props.paused && props.autoStart, // 是否处于倒计时中
-      handleEndTime: Date.now(), // 最终截止时间
-      diffTime: 0 // 设置了 startTime 时，与 date.now() 的差异
-    })
-
-    const renderTime = computed(() => {
-      return formatRemainTime(state.restTime)
-    })
-
-    // 倒计时 interval
-    const initTime = () => {
-      state.handleEndTime = Number(props.endTime)
-      state.diffTime = Date.now() - getTimeStamp(props.startTime) // 时间差
-      if (!state.counting) state.counting = true
-      tick()
-    }
-
-    const tick = () => {
-      if (window !== undefined) {
-        (state.timer as any) = requestAnimationFrame(() => {
-          if (state.counting) {
-            const currentTime = Date.now() - state.diffTime
-            const remainTime = Math.max(state.handleEndTime - currentTime, 0)
-
-            state.restTime = remainTime
-
-            if (!remainTime) {
-              state.counting = false
-              pause()
-              emit('end')
-              emit('onEnd')
-            }
-
-            if (remainTime > 0) {
-              tick()
-            }
-          }
-        })
-      }
-    }
-
-    // 将倒计时剩余时间格式化   参数： t  时间戳  type custom 自定义类型
-    const formatRemainTime = (t: number, type?: string) => {
-      const ts = t
-      let rest = {
-        d: 0,
-        h: 0,
-        m: 0,
-        s: 0,
-        ms: 0
-      }
-
-      const SECOND = 1000
-      const MINUTE = 60 * SECOND
-      const HOUR = 60 * MINUTE
-      const DAY = 24 * HOUR
-
-      if (ts > 0) {
-        rest.d = ts >= SECOND ? Math.floor(ts / DAY) : 0
-        rest.h = Math.floor((ts % DAY) / HOUR)
-        rest.m = Math.floor((ts % HOUR) / MINUTE)
-        rest.s = Math.floor((ts % MINUTE) / SECOND)
-        rest.ms = Math.floor(ts % SECOND)
-      }
-
-      return type == 'custom' ? rest : parseFormat({ ...rest })
-    }
-
-    const parseFormat = (time: { d: number, h: number, m: number, s: number, ms: number }) => {
-      let { d, h, m, s, ms } = time
-      let format = props.format
-
-      if (format.includes('DD')) {
-        format = format.replace('DD', padZero(d))
-      } else {
-        h += Number(d) * 24
-      }
-
-      if (format.includes('HH')) {
-        format = format.replace('HH', padZero(h))
-      } else {
-        m += Number(h) * 60
-      }
-
-      if (format.includes('mm')) {
-        format = format.replace('mm', padZero(m))
-      } else {
-        s += Number(m) * 60
-      }
-
-      if (format.includes('ss')) {
-        format = format.replace('ss', padZero(s))
-      } else {
-        ms += Number(s) * 1000
-      }
-
-      if (format.includes('S')) {
-        const msC = padZero(ms, 3).toString()
-
-        if (format.includes('SSS')) {
-          format = format.replace('SSS', msC)
-        } else if (format.includes('SS')) {
-          format = format.replace('SS', msC.slice(0, 2))
-        } else if (format.includes('S')) {
-          format = format.replace('S', msC.slice(0, 1))
-        }
-      }
-      return format
-    }
-
-    // 开始
-    const start = () => {
-      if (!state.counting && !props.autoStart) {
-        state.counting = true
-        state.handleEndTime = Date.now() + Number(state.restTime)
-        tick()
-        emit('restart', state.restTime)
-        emit('onRestart', state.restTime)
-      }
-    }
-    // 暂定
-    const pause = () => {
-      cancelAnimationFrame(state.timer as any)
-      state.counting = false
-      emit('paused', state.restTime)
-      emit('onPaused', state.restTime)
-    }
-
-    // 重置
-    const reset = () => {
-      if (!props.autoStart) {
-        pause()
-        state.restTime = Number(props.time)
-      }
-    }
-
-    onBeforeMount(() => {
-      if (props.autoStart) {
-        initTime()
-      } else {
-        state.restTime = Number(props.time)
-      }
-    })
-
-    watch(
-      () => state.restTime,
-      (value) => {
-        let tranTime = formatRemainTime(value, 'custom')
-        emit('update:modelValue', tranTime)
-        emit('input', tranTime)
-      }
-    )
-
-    watch(
-      () => props.paused,
-      (v, ov) => {
-        if (!ov) {
-          if (state.counting) {
-            pause()
-          }
-        } else {
-          if (!state.counting) {
-            state.counting = true
-            state.handleEndTime = Date.now() + Number(state.restTime)
-            tick()
-          }
-          emit('restart', state.restTime)
-          emit('onRestart', state.restTime)
-        }
-      }
-    )
-
-    watch(
-      () => props.endTime,
-      () => {
-        initTime()
-      }
-    )
-
-    watch(
-      () => props.startTime,
-      () => {
-        initTime()
-      }
-    )
-
-    return {
-      ...toRefs(props),
-      slots,
-      start,
-      pause,
-      renderTime,
-      translate,
-      reset
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/countdown/util.ts b/src/packages/__VUE/countdown/util.ts
index 92e6049d6e..970cb1ade2 100644
--- a/src/packages/__VUE/countdown/util.ts
+++ b/src/packages/__VUE/countdown/util.ts
@@ -1,3 +1,5 @@
+import { padZero } from '@/packages/utils/util'
+
 // 时间戳转换 或 获取当前时间的时间戳
 export const getTimeStamp = (timeStr?: string | number) => {
   if (!timeStr) return Date.now()
@@ -5,3 +7,71 @@ export const getTimeStamp = (timeStr?: string | number) => {
   t = +t > 0 ? +t : t.toString().replace(/-/g, '/')
   return new Date(t).getTime()
 }
+
+export const parseFormat = (time: { d: number, h: number, m: number, s: number, ms: number }, format: string) => {
+  let { h, m, s, ms } = time
+  const { d } = time
+
+  if (format.includes('DD')) {
+    format = format.replace('DD', padZero(d))
+  } else {
+    h += Number(d) * 24
+  }
+
+  if (format.includes('HH')) {
+    format = format.replace('HH', padZero(h))
+  } else {
+    m += Number(h) * 60
+  }
+
+  if (format.includes('mm')) {
+    format = format.replace('mm', padZero(m))
+  } else {
+    s += Number(m) * 60
+  }
+
+  if (format.includes('ss')) {
+    format = format.replace('ss', padZero(s))
+  } else {
+    ms += Number(s) * 1000
+  }
+
+  if (format.includes('S')) {
+    const msC = padZero(ms, 3).toString()
+
+    if (format.includes('SSS')) {
+      format = format.replace('SSS', msC)
+    } else if (format.includes('SS')) {
+      format = format.replace('SS', msC.slice(0, 2))
+    } else if (format.includes('S')) {
+      format = format.replace('S', msC.slice(0, 1))
+    }
+  }
+  return format
+}
+
+export const formatRemainTime = (t: number, format: string, type?: string) => {
+  const ts = t
+  const rest = {
+    d: 0,
+    h: 0,
+    m: 0,
+    s: 0,
+    ms: 0
+  }
+
+  const SECOND = 1000
+  const MINUTE = 60 * SECOND
+  const HOUR = 60 * MINUTE
+  const DAY = 24 * HOUR
+
+  if (ts > 0) {
+    rest.d = ts >= SECOND ? Math.floor(ts / DAY) : 0
+    rest.h = Math.floor((ts % DAY) / HOUR)
+    rest.m = Math.floor((ts % HOUR) / MINUTE)
+    rest.s = Math.floor((ts % MINUTE) / SECOND)
+    rest.ms = Math.floor(ts % SECOND)
+  }
+
+  return type == 'custom' ? rest : parseFormat({ ...rest }, format)
+}