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. + + + + + 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,