diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index ccf50bcf260..621b7fb462f 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,13 @@
# CHANGELOG
+## NEXT_VERSION
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-number-animation` adds `format` prop, closes [#7174](https://github.com/tusen-ai/naive-ui/issues/7174)
+
## 2.43.1
`2025-09-15`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 7c0e0300828..cfec83fe376 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,13 @@
# CHANGELOG
+## NEXT_VERSION
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-number-animation` 添加 `format` 属性,关闭 [#7174](https://github.com/tusen-ai/naive-ui/issues/7174)
+
## 2.43.1
`2025-09-15`
diff --git a/src/number-animation/demos/enUS/format.demo.vue b/src/number-animation/demos/enUS/format.demo.vue
new file mode 100644
index 00000000000..ea4ff0204cd
--- /dev/null
+++ b/src/number-animation/demos/enUS/format.demo.vue
@@ -0,0 +1,53 @@
+
+# Custom Format
+
+Use the `format` property to customize the format of the number.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Play
+
+
+
diff --git a/src/number-animation/demos/enUS/index.demo-entry.md b/src/number-animation/demos/enUS/index.demo-entry.md
index 96adb33ef57..5b65651d587 100644
--- a/src/number-animation/demos/enUS/index.demo-entry.md
+++ b/src/number-animation/demos/enUS/index.demo-entry.md
@@ -9,6 +9,7 @@ basic.vue
precision.vue
separator.vue
intl.vue
+format.vue
finish.vue
```
@@ -21,6 +22,7 @@ finish.vue
| active | `boolean` | `true` | Whether to play the animation. | 2.23.2 |
| duration | `number` | `3000` | The duration of | 2.23.2 |
| from | `number` | `0` | Start value of the animation | 2.23.2 |
+| format | `(value: number) => string` | `undefined` | Custom formatter for the integer part | NEXT_VERSION |
| locale | `string` | Follows config provider. | Language of the number. | 2.24.2 |
| precision | `number` | `0` | Decimal precision of the displayed value. | 2.23.2 |
| show-separator | `boolean` | `false` | Whether to show separator. | 2.23.2 |
diff --git a/src/number-animation/demos/zhCN/format.demo.vue b/src/number-animation/demos/zhCN/format.demo.vue
new file mode 100644
index 00000000000..2e0672d8c1a
--- /dev/null
+++ b/src/number-animation/demos/zhCN/format.demo.vue
@@ -0,0 +1,53 @@
+
+# 自定义格式化
+
+使用 `format` 属性自定义数值
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 播放
+
+
+
diff --git a/src/number-animation/demos/zhCN/index.demo-entry.md b/src/number-animation/demos/zhCN/index.demo-entry.md
index e2e363846b5..ba354563e29 100644
--- a/src/number-animation/demos/zhCN/index.demo-entry.md
+++ b/src/number-animation/demos/zhCN/index.demo-entry.md
@@ -9,6 +9,7 @@ basic.vue
precision.vue
separator.vue
intl.vue
+format.vue
finish.vue
```
@@ -21,6 +22,7 @@ finish.vue
| active | `boolean` | `true` | 是否开始动画 | 2.23.2 |
| duration | `number` | `3000` | 动画持续时间 | 2.23.2 |
| from | `number` | `0` | 数值动画起始值 | 2.23.2 |
+| format | `(value: number) => string` | `undefined` | 自定义格式化数值函数 | NEXT_VERSION |
| locale | `string` | 跟随 config provider | 国际化的语言 | 2.24.2 |
| precision | `number` | `0` | 精度,保留小数点后几位 | 2.23.2 |
| show-separator | `boolean` | `false` | 是否显示分隔符 | 2.23.2 |
diff --git a/src/number-animation/src/NumberAnimation.tsx b/src/number-animation/src/NumberAnimation.tsx
index 1b5b5236a19..1662606b07e 100644
--- a/src/number-animation/src/NumberAnimation.tsx
+++ b/src/number-animation/src/NumberAnimation.tsx
@@ -1,13 +1,7 @@
import type { PropType } from 'vue'
import type { ExtractPublicPropTypes } from '../../_utils'
import { round } from 'lodash-es'
-import {
- computed,
- defineComponent,
- onMounted,
- ref,
- watchEffect
-} from 'vue'
+import { computed, defineComponent, onMounted, ref, watchEffect } from 'vue'
import { useLocale } from '../../_mixins'
import { tween } from './utils'
@@ -31,6 +25,7 @@ export const numberAnimationProps = {
type: Number,
default: 2000
},
+ format: Function as PropType<(value: number) => string>,
onFinish: Function as PropType<() => void>
}
@@ -91,9 +86,13 @@ export default defineComponent({
.formatToParts(0.5)
.find(part => part.type === 'decimal')
?.value
- const integer = props.showSeparator
- ? numberFormatter.format(Number(splitValue[0]))
- : splitValue[0]
+
+ const intValue = Number(splitValue[0])
+ const integer = props.format
+ ? props.format(intValue)
+ : props.showSeparator
+ ? numberFormatter.format(intValue)
+ : splitValue[0]
const decimal = splitValue[1]
return {
integer,