介绍
bz-count-up 是一个基于 Vue.js 和 Anime.js 构建的数字滚动动画组件，它可以让数字从 0 开始动态滚动到指定的数字，可用于展示数据变化等场景。该组件封装了动画效果，使用起来非常简单，只需要传入数字和相关配置即可。
安装
bz-count-up 可以通过 npm 安装：
npm install bz-count-up --save
使用
在 Vue 项目中引入 bz-count-up：
import BzCountUp from 'bz-count-up';
将组件注册到当前组件中：
export default {
components: {
BzCountUp
},
...
}在模板中使用 bz-count-up 组件，传入数字和相关配置：
<bz-count-up :endVal="1000" duration="5000" delay="1000" easing="easeInOutQuart"></bz-count-up>
这个示例将数字从 0 滚动到 1000，动画时长为 5 秒，延迟 1 秒开始动画，缓动效果使用 easeInOutQuart。
参数
bz-count-up 组件有以下可配置的参数：
endVal
必填参数，表示要滚动到的目标数字。
duration
可选参数，默认值为 2000，表示动画时长（毫秒）。
delay
可选参数，默认值为 0，表示动画延迟开始的时间（毫秒）。
easing
可选参数，默认值为 easeOutExpo，表示使用的缓动函数，可以参考 anime.js 缓动函数列表.
useEasing
可选参数，默认值为 true，表示是否使用缓动函数。
separator
可选参数，默认值为 false，表示是否使用数字分隔符（千分位），可以传入字符串参数，表示分隔符的样式，例如：
<bz-count-up :endVal="10000" separator="," separator-style="' '" duration="3000"></bz-count-up>
这个示例将数字从 0 滚动到 10,000，使用逗号作为分隔符，分隔符样式为一个空格。
decimals
可选参数，默认值为 0，表示保留小数点后几位。
decimalPoint
可选参数，默认值为 .，表示小数点的符号。
prefix
可选参数，默认值为空字符串，表示数字前面要添加的字符串，例如：
<bz-count-up :endVal="1000" prefix="$"></bz-count-up>
这个示例将数字从 0 滚动到 $1000。
suffix
可选参数，默认值为空字符串，表示数字后面要添加的字符串，例如：
<bz-count-up :endVal="250" suffix=" kg"></bz-count-up>
这个示例将数字从 0 滚动到 250 kg。
事件
bz-count-up 组件有以下事件：
start
当动画开始时触发。
pause
当动画暂停时触发。
resume
当动画恢复时触发。
reset
当动画重置时触发。
complete
当动画完成时触发。
例如：
<bz-count-up :endVal="500" @complete="onComplete"></bz-count-up>
这个示例将数字从 0 滚动到 500，当动画完成时调用 onComplete 方法。
示例
-- -------------------- ---- -------
----------
-----
-------------------
---- ------------
---- ------------
-------------
------------ -----------------------------
------
---- ------------
------------
------------ ------------- ---------- ---------------------------
------
---- ------------
-------------
------------ --------------- ------------- ------------------ -- ------------------------------
------
------
------
-----------
--------
------ --------- ---- --------------
------ ------- -
----------- -
---------
--
-------- -
------------ -
---------------------
-
-
--
---------
-------
---- -
-------- -----
---------------- -------
-
---- -
------- - -----
----------- -------
-
--------结语
bz-count-up 是一个非常实用的数字滚动动画组件，通过学习本文，你可以轻松地使用该组件来展示数据变化，提升用户的视觉体验。阅读源代码可以进一步深入了解如何使用动画引擎进行组件开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8fccdc64669dde574a