CountTo 数字动画

CountTo 数字动画 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { CountTo } from "@/components/page/count-to";

const demoProps = { endVal: 12800, prefix: "¥", duration: 1 };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <CountTo v-bind="demoProps"></CountTo>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { CountTo } from "@/components/page/count-to";

Props

参数	说明	类型	默认值	必填
init	初始值，后面会被 startVal 覆盖	number	0	否
startVal	起始值，即动画开始前显示的数值	number	0	否
endVal	结束值，即动画结束后显示的数值	number	-	是
prefix	数值的前缀	string	""	否
suffix	数值的后缀	string	""	否
decimals	保留几位小数	number	0	否
decimal	分隔整数和小数的符号，默认是小数点	string	"."	否
duration	动画持续的时间，单位是秒	number	3	否
delay	动画延迟开始的时间，单位是秒	number	0	否
autoplay	是否自动播放	boolean	true	否
useEasing	是否使用 easing 动画效果	boolean	true	否
useGroup	是否使用分组，分组后每三位会用一个符号分隔，即 1000 位 1,000	boolean	true	否
separator	用于分组（useGroup）的符号	string	","	否
simplify	是否简化显示，设为 true 后会使用 unit 单位来做相关省略	boolean	false	否
unit	自定义单位，如 { value: 3, label: "K+" }, { value: 6, label: "M+" } 即大于 3 位数小于 6 位数的用 k+ 来做省略 1000 即显示为 1K+	Unit[]	[ { value: 3, label: "K+" }, { value: 6, label: "M+" }, { value: 9, label: "B+" }, ]	否
countClass	count 数字的 class	string	""	否
unitClass	单位的 class	string	""	否
loop	循环次数	number	1	否

Events

事件名	说明	回调参数
init	init 事件触发时回调。	counter: CountUpInstance
finished	finished 事件触发时回调。	-

Slots

插槽名	说明	参数
prefix	前置内容插槽。	-
suffix	后置内容插槽。	-

Expose

名称	说明	类型
restart	暴露 restart 给外部调用。	-
pause	暴露 pause 给外部调用。	-
reset	重置组件状态。	-
init	暴露 init 给外部调用。	initCountUp
update	暴露 update 给外部调用。	-

Module API

名称	说明	类型
CountTo	导出 CountTo 供业务侧复用。	useInstall(index)

Types

CountToProps

导出 CountToProps 供业务侧复用。

字段	说明	类型	默认值	必填
init	初始值，后面会被 startVal 覆盖	number	-	否
startVal	起始值，即动画开始前显示的数值	number	-	否
endVal	结束值，即动画结束后显示的数值	number	-	是
prefix	数值的前缀	string	-	否
suffix	数值的后缀	string	-	否
decimals	保留几位小数	number	-	否
decimal	分隔整数和小数的符号，默认是小数点	string	-	否
duration	动画持续的时间，单位是秒	number	-	否
delay	动画延迟开始的时间，单位是秒	number	-	否
autoplay	是否自动播放	boolean	-	否
useEasing	是否使用 easing 动画效果	boolean	-	否
useGroup	是否使用分组，分组后每三位会用一个符号分隔，即 1000 位 1,000	boolean	-	否
separator	用于分组（useGroup）的符号	string	-	否
simplify	是否简化显示，设为 true 后会使用 unit 单位来做相关省略	boolean	-	否
unit	自定义单位，如 { value: 3, label: "K+" }, { value: 6, label: "M+" } 即大于 3 位数小于 6 位数的用 k+ 来做省略 1000 即显示为 1K+	Unit[]	-	否
countClass	count 数字的 class	string	-	否
unitClass	单位的 class	string	-	否
loop	循环次数	number	-	否

Unit

导出 Unit 供业务侧复用。

字段	说明	类型	默认值	必填
value	组件值。	number	-	是
label	配置 label。	string	-	是

CountToEmits

导出 CountToEmits 供业务侧复用。

字段	说明	类型	默认值	必填
init	配置 init。	[counter: CountUpInstance]	-	是
finished	配置 finished。	[]	-	是

CountUpInstance

导出 CountUpInstance 供业务侧复用。

字段	说明	类型	默认值	必填
start	配置 start。	(callback: () => void) => boolean	-	是
pauseResume	配置 pauseResume。	() => void	-	是
reset	配置 reset。	() => void	-	是
update	配置 update。	(newEndVal: number) => void	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。