feat(n-number-animation): add on-update prop

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Features
+
+- `n-number-animation` adds `on-update` prop.
+
 ## 2.40.3
 
 `2024-12-02`

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Features
+
+- `n-number-animation` 新增 `on-update` 属性
+
 ## 2.40.3
 
 `2024-12-02`

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

@@ -10,6 +10,7 @@ precision.vue
 separator.vue
 intl.vue
 finish.vue
+update.vue
 ```
 
 ## API
@@ -26,6 +27,7 @@ finish.vue
 | show-separator | `boolean` | `false` | Whether to show separator. | 2.23.2 |
 | to | `number` | `undefined` | Target value. | 2.23.2 |
 | on-finish | `() => void` | `undefined` | The callback on animation is finished. | 2.31.0 |
+| on-update | `(value: number) => void` | `undefined` | The number animation update callback. | NEXT_VERSION |
 
 ### NumberAnimation Methods
 

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

@@ -0,0 +1,55 @@
+<markdown>
+# Update callback
+</markdown>
+
+<script lang="ts">
+import type { NumberAnimationInst } from 'naive-ui'
+import { round } from 'lodash-es'
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const numberAnimationInstRef = ref<NumberAnimationInst | null>(null)
+    const updateValue = ref<number>(0)
+    const precision = 2
+    return {
+      numberAnimationInstRef,
+      updateValue,
+      precision,
+      handleClick() {
+        numberAnimationInstRef.value?.play()
+      },
+      handleUpdate(value: number) {
+        updateValue.value = round(value, precision)
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <n-space vertical>
+    <n-statistic label="NumberAnimation sync progress bar" tabular-nums>
+      <n-number-animation
+        ref="numberAnimationInstRef"
+        show-separator
+        :from="0"
+        :to="100"
+        :active="false"
+        :duration="5 * 1000"
+        :precision="precision"
+        @update="handleUpdate"
+      />
+      <div
+        :style="{
+          width: `${updateValue}%`,
+          height: '4px',
+          backgroundColor: '#000',
+        }"
+      />
+    </n-statistic>
+    <n-button @click="handleClick">
+      Play
+    </n-button>
+  </n-space>
+</template>

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

@@ -10,6 +10,7 @@ precision.vue
 separator.vue
 intl.vue
 finish.vue
+update.vue
 ```
 
 ## API
@@ -26,6 +27,7 @@ finish.vue
 | show-separator | `boolean` | `false` | 是否显示分隔符 | 2.23.2 |
 | to | `number` | `undefined` | 目标值 | 2.23.2 |
 | on-finish | `() => void` | `undefined` | 动画结束的回调 | 2.31.0 |
+| on-update | `(value: number) => void` | `undefined` | 动画更新的回调 | NEXT_VERSION |
 
 ### NumberAnimation Methods
 

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

@@ -0,0 +1,55 @@
+<markdown>
+# 更新的回调
+</markdown>
+
+<script lang="ts">
+import type { NumberAnimationInst } from 'naive-ui'
+import { round } from 'lodash-es'
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const numberAnimationInstRef = ref<NumberAnimationInst | null>(null)
+    const updateValue = ref<number>(0)
+    const precision = 2
+    return {
+      numberAnimationInstRef,
+      updateValue,
+      precision,
+      handleClick() {
+        numberAnimationInstRef.value?.play()
+      },
+      handleUpdate(value: number) {
+        updateValue.value = round(value, precision)
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <n-space vertical>
+    <n-statistic label="数值动画同步进度条" tabular-nums>
+      <n-number-animation
+        ref="numberAnimationInstRef"
+        show-separator
+        :from="0"
+        :to="100"
+        :active="false"
+        :duration="5 * 1000"
+        :precision="precision"
+        @update="handleUpdate"
+      />
+      <div
+        :style="{
+          width: `${updateValue}%`,
+          height: '4px',
+          backgroundColor: '#000',
+        }"
+      />
+    </n-statistic>
+    <n-button @click="handleClick">
+      开始
+    </n-button>
+  </n-space>
+</template>

src/number-animation/src/NumberAnimation.tsx

@@ -31,6 +31,7 @@ export const numberAnimationProps = {
     type: Number,
     default: 2000
   },
+  onUpdate: Function as PropType<(value: number) => void>,
   onFinish: Function as PropType<() => void>
 }
 
@@ -58,6 +59,7 @@ export default defineComponent({
     let animating = false
     const onUpdate = (currentValue: number): void => {
       displayedValueRef.value = currentValue
+      props.onUpdate?.(currentValue)
     }
     const onFinish = (): void => {
       displayedValueRef.value = props.to