docs: 更新文档

FightingDesign · May 5, 2023 · a378fa7 · a378fa7
1 parent 9cbd5bb
commit a378fa7
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 93 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -68,6 +68,7 @@
     "composables",
     "copyfont",
     "costoms",
+    "countdownfinish",
     "creditcard",
     "Customermanagement",
     "danjuzhuanhuan",

diff --git a/docs/components/count-down.md b/docs/components/count-down.md
@@ -134,16 +134,24 @@
 
 :::
 
-## CountDown Attributes
+## Attributes
 
-| 参数         | 说明                   | 类型            | 可选值 | 默认值     |
-| ------------ | ---------------------- | --------------- | ------ | ---------- |
-| `time`       | 倒计时时长，单位毫秒   | string / number | ——     | ——         |
-| `format`     | 时间格式               | string          | ——     | `HH:mm:ss` |
-| `auto-Start` | 是否自动开始倒计时     | boolean         | ——     | `true`     |
-| `finish`     | 倒计时结束后触发的回调 | _() => void_    | ——     | ——         |
+| 参数         | 说明                   | 类型                                           | 可选值 | 默认值   |
+| ------------ | ---------------------- | ---------------------------------------------- | ------ | -------- |
+| `time`       | 倒计时时长，单位毫秒   | string / number                                | ——     | ——       |
+| `format`     | 时间格式               | string                                         | ——     | HH:mm:ss |
+| `auto-start` | 是否自动开始倒计时     | boolean                                        | ——     | true     |
+| `on-finish`  | 倒计时结束后触发的回调 | <a href="#countdownfinish">CountDownFinish</a> | ——     | ——       |
 
-## CountDown Slots
+## Methods
+
+| 参数       | 说明                                                         | 参数                  |
+| ---------- | ------------------------------------------------------------ | --------------------- |
+| `start`    | 开始倒计时                                                   | ——                    |
+| `pause`    | 暂停倒计时                                                   | ——                    |
+| `on-reset` | 重设倒计时，若 `autostart` 为 `true`，重设后会自动开始倒计时 | `total-time` 倒计时长 |
+
+## Slots
 
 | 名称      | 说明       | 参数                    |
 | --------- | ---------- | ----------------------- |
@@ -154,32 +162,16 @@
 组件导出以下类型定义：
 
 ```ts
-import type { CountDownInstance, CountDownProps } from 'fighting-design'
+import type { CountDownInstance, CountDownProps, CountDownFinish } from 'fighting-design'
 ```
 
-### CurrentTime 说明
+### CountDownFinish
 
 ```ts
-interface CurrentTime {
-  total: number
-  days: number
-  hours: number
-  minutes: number
-  seconds: number
-  milliseconds: number
-}
+type CountDownFinish = () => void
 ```
 
-| 名称         | 说明                   | 类型     |
-| ------------ | ---------------------- | -------- |
-| total        | 剩余总时间（单位毫秒） | _number_ |
-| days         | 剩余天数               | _number_ |
-| hours        | 剩余小时               | _number_ |
-| minutes      | 剩余分钟               | _number_ |
-| seconds      | 剩余秒数               | _number_ |
-| milliseconds | 剩余毫秒               | _number_ |
-
-### format 格式
+<!-- ### format 格式
 
 | 格式 | 说明         |
 | ---- | ------------ |
@@ -189,17 +181,7 @@ interface CurrentTime {
 | ss   | 秒数         |
 | S    | 毫秒（1 位） |
 | SS   | 毫秒（2 位） |
-| SSS  | 毫秒（3 位） |
-
-### 实例方法
-
-通过 ref 可以获取到 Countdown 实例并调用实例方法。
-
-| 方法名   | 说明                                                         | 参数                  | 返回值 |
-| -------- | ------------------------------------------------------------ | --------------------- | ------ |
-| start    | 开始倒计时                                                   | ——                    | ——     |
-| pause    | 暂停倒计时                                                   | ——                    | -      |
-| on-reset | 重设倒计时，若 `autostart` 为 `true`，重设后会自动开始倒计时 | `total-time` 倒计时长 | ——     |
+| SSS  | 毫秒（3 位） | -->
 
 ### 样式变量
 

diff --git a/packages/fighting-design/_hooks/use-count-down/index.ts b/packages/fighting-design/_hooks/use-count-down/index.ts
@@ -65,7 +65,6 @@ const DAY = 24 * HOUR
  * @param { number } time 时间（单位毫秒）
  * @returns { CurrentTime }
  */
-
 const parseTime = (time: number): CurrentTime => {
   const days = Math.floor(time / DAY)
   const hours = Math.floor((time % DAY) / HOUR)
@@ -105,8 +104,8 @@ export const useCountDown = (options: UseCountDownOptions): UseCountDownReturn =
   let isCounting: boolean
   let deactivated: boolean
 
-  const remain = ref(options.time)
-  const current = computed(() => parseTime(remain.value))
+  const remain = ref<number>(options.time)
+  const current = computed((): CurrentTime => parseTime(remain.value))
 
   const getCurrentRemain = (): number => Math.max(endTime - performance.now(), 0)
 
@@ -120,7 +119,7 @@ export const useCountDown = (options: UseCountDownOptions): UseCountDownReturn =
   }
 
   const tick = (): void => {
-    // 非浏览器环境，时间不走
+    /** 非浏览器环境，时间不走 */
     if (!isBrowser) {
       return
     }
@@ -150,9 +149,9 @@ export const useCountDown = (options: UseCountDownOptions): UseCountDownReturn =
     cancelRaf(rafId)
   }
 
-  // 毫秒级渲染
+  /** 毫秒级渲染 */
   const microTick = (): void => {
-    rafId = raf(() => {
+    rafId = raf((): void => {
       if (isCounting) {
         setRemain(getCurrentRemain())
 
@@ -163,9 +162,9 @@ export const useCountDown = (options: UseCountDownOptions): UseCountDownReturn =
     })
   }
 
-  // 秒级渲染
+  /** 秒级渲染 */
   const macroTick = (): void => {
-    rafId = raf(() => {
+    rafId = raf((): void => {
       if (isCounting) {
         const remainRemain = getCurrentRemain()
 
@@ -180,20 +179,20 @@ export const useCountDown = (options: UseCountDownOptions): UseCountDownReturn =
     })
   }
 
-  // 即将卸载时，暂停倒计时
+  /** 即将卸载时，暂停倒计时 */
   onBeforeUnmount(pause)
 
-  // keep-alive下 继续倒计时
-  onActivated(() => {
+  /** keep-alive下 继续倒计时 */
+  onActivated((): void => {
     if (deactivated) {
       isCounting = true
       deactivated = false
       tick()
     }
   })
 
-  // keep-alive下 暂停倒计时
-  onDeactivated(() => {
+  /** keep-alive下 暂停倒计时 */
+  onDeactivated((): void => {
     if (isCounting) {
       pause()
       deactivated = true

diff --git a/packages/fighting-design/count-down/src/interface.d.ts b/packages/fighting-design/count-down/src/interface.d.ts
@@ -1 +1,4 @@
 export type { CountDownProps } from './props'
+
+/** 回调方法类型 */
+export type CountDownFinish = () => void
diff --git a/packages/fighting-design/count-down/src/props.ts b/packages/fighting-design/count-down/src/props.ts
@@ -5,6 +5,7 @@ import {
   setStringProp,
   setFunctionProp
 } from '../../_utils'
+import type { CountDownFinish } from './interface'
 
 export const Props = {
   /** 倒计时时长，单位毫秒 */
@@ -16,7 +17,7 @@ export const Props = {
   /** 是否开启毫秒级渲染 */
   millisecond: setBooleanProp(false),
   /** 倒计时结束的回调 */
-  onFinish: setFunctionProp()
+  onFinish: setFunctionProp<CountDownFinish>()
 } as const
 
 /** count-down 组件 props 类型 */

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,42 +1,5 @@
-<script setup lang="ts">
-  import { ref } from 'vue'
+<script lang="ts" setup></script>
 
-  const visible1 = ref(true)
+<template></template>
 
-  const handleOpen = el => console.log(el)
-</script>
-
-<template>
-  <f-button type="primary" @click="visible1 = true">打开</f-button>
-
-  <!-- fullscreen -->
-  <f-dialog
-    v-model:visible="visible1"
-    title="标题文字"
-    width="500px"
-    :on-open="handleOpen"
-  >
-    这是一个 Dialog
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-    <h1>1</h1>
-
-    <template #footer>
-      <f-button type="default">默认按钮</f-button>
-      <f-button type="primary">主要按钮</f-button>
-    </template>
-  </f-dialog>
-</template>
+<style lang="scss" scoped></style>