feat(number-animation): add on-finish prop (#3224)

* feat(number-animation): add `on-finish` prop

* chore: update changelog

CHANGELOG.en-US.md

@@ -15,6 +15,7 @@
 
 - `n-avatar` adds `lazy` prop.
 - `n-avatar` adds `intersection-observer-options` prop.
+- `n-number-animation` adds `on-finish` prop.
 
 ## 2.30.8
 

CHANGELOG.zh-CN.md

@@ -15,6 +15,7 @@
 
 - `n-avatar` 新增 `lazy` 属性
 - `n-avatar` 新增 `intersection-observer-options` 属性
+- `n-number-animation` 新增 `on-finish` 属性
 
 ## 2.30.8
 

src/number-animation/demos/enUS/finish.demo.vue

@@ -0,0 +1,41 @@
+<markdown>
+# Finish
+
+When the number stops, you will leave, and so will I.
+</markdown>
+
+<template>
+  <n-statistic tabular-nums>
+    <n-number-animation
+      ref="numberAnimationInstRef"
+      show-separator
+      :from="0"
+      :to="100000000"
+      :active="false"
+      @finish="handleFinish"
+    />
+  </n-statistic>
+  <n-button @click="handleClick">
+    Play
+  </n-button>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { NumberAnimationInst } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const numberAnimationInstRef = ref<NumberAnimationInst | null>(null)
+    return {
+      numberAnimationInstRef,
+      handleClick () {
+        numberAnimationInstRef.value?.play()
+      },
+      handleFinish () {
+        console.log('finish')
+      }
+    }
+  }
+})
+</script>

src/number-animation/demos/enUS/index.demo-entry.md

@@ -9,6 +9,7 @@ basic.vue
 precision.vue
 separator.vue
 intl.vue
+finish.vue
 ```
 
 ## API
@@ -24,6 +25,7 @@ intl.vue
 | show-separator | `boolean` | `false` | Whether to show separator. | 2.23.2 |
 | to | `number` | `undefined` | Target value. | 2.23.2 |
 | locale | `string` | Follows config provider. | Language of the number. | 2.24.2 |
+| on-finish | `() => void` | `undefined` | The callback on animation is finished. | NEXT_VERSION |
 
 ### NumberAnimation Methods
 

src/number-animation/demos/zhCN/finish.demo.vue

@@ -0,0 +1,41 @@
+<markdown>
+# 结束
+
+数字停下来，你将离场，我也只能这样。
+</markdown>
+
+<template>
+  <n-statistic tabular-nums>
+    <n-number-animation
+      ref="numberAnimationInstRef"
+      show-separator
+      :from="0"
+      :to="100000000"
+      :active="false"
+      @finish="handleFinish"
+    />
+  </n-statistic>
+  <n-button @click="handleClick">
+    播放
+  </n-button>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { NumberAnimationInst } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const numberAnimationInstRef = ref<NumberAnimationInst | null>(null)
+    return {
+      numberAnimationInstRef,
+      handleClick () {
+        numberAnimationInstRef.value?.play()
+      },
+      handleFinish () {
+        console.log('finish')
+      }
+    }
+  }
+})
+</script>

src/number-animation/demos/zhCN/index.demo-entry.md

@@ -9,6 +9,7 @@ basic.vue
 precision.vue
 separator.vue
 intl.vue
+finish.vue
 ```
 
 ## API
@@ -24,6 +25,7 @@ intl.vue
 | show-separator | `boolean` | `false` | 是否显示分隔符 | 2.23.2 |
 | to | `number` | `undefined` | 目标值 | 2.23.2 |
 | locale | `string` | 跟随 config provider | 国际化的语言 | 2.24.2 |
+| on-finish | `() => void` | `undefined` | 动画结束的回调 | NEXT_VERSION |
 
 ### NumberAnimation Methods
 

src/number-animation/src/NumberAnimation.tsx

@@ -1,4 +1,11 @@
-import { defineComponent, computed, onMounted, ref, watchEffect } from 'vue'
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  watchEffect,
+  PropType
+} from 'vue'
 import { round } from 'lodash-es'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import { tween } from './utils'
@@ -23,7 +30,8 @@ const numberAnimationProps = {
   duration: {
     type: Number,
     default: 2000
-  }
+  },
+  onFinish: Function as PropType<() => void>
 }
 
 export type NumberAnimationProps = ExtractPublicPropTypes<
@@ -53,6 +61,7 @@ export default defineComponent({
     const onFinish = (): void => {
       displayedValueRef.value = props.to
       animating = false
+      props.onFinish?.()
     }
     const animate = (
       from: number = props.from,