CountUp 数字动画

avue-count-up 将数字从起始值动画过渡到目标值。关闭动画时直接展示 end。

效果预览可直接操作下方示例

点击“更新目标值”可观察数值过渡；第二个数字展示两位小数。

正在加载示例…

<template>
  <div class="count-up-demo">
    <div><span>访问次数</span><avue-count-up :end="visits" /></div>
    <div><span>累计金额</span><avue-count-up :start="1000" :end="1233.2" :decimals="2" /></div>
  </div>
  <el-button @click="visits += 100">更新目标值</el-button>
</template>

<script setup>
import { ref } from 'vue'
const visits = ref(15033)
</script>

<style scoped>
.count-up-demo { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 16px; }
.count-up-demo > div { display: flex; flex-direction: column; gap: 8px; }
.count-up-demo > div > span:last-child { font-size: 32px; font-weight: 600; color: var(--el-color-primary); }
</style>

Props

参数	说明	类型	默认值
end	必填，目标数字，建议传 number	number	—
start	起始数字	number	0
animation	挂载时是否初始化动画	boolean	true
decimals	初始化动画使用的小数位数	number	0
duration	动画持续时间，单位秒	number	2
options	传给组件所用 CountUp.js 的配置对象	object	{}
callback	当前源码保留了该属性，但没有调用它	function	空函数

动态修改 end 会更新目标值。当前版本不会因 start / duration / options / animation 变化重建动画；需重设这些初始化参数时，可通过 Vue key 重建组件。修改 decimals 只触发原实例的数值更新，也不会重建精度配置。

Methods、Events 与 Slots

方法	参数	说明
pauseResume	无	暂停或继续已初始化的动画
reset	无	重置动画实例
update	newEndVal	直接更新动画目标；推荐优先更新绑定的 end
init	无	异步初始化，已有实例时不重复创建
destroy	无	清除组件持有的动画实例引用

通过 ref 调用；动画尚未初始化时，暂停、重置与更新方法不会操作实例。组件没有自定义事件或插槽，也没有已实现的完成回调。