vue-countupjs大屏数字滚动效果

这篇文章介绍了VueCountUp.js,一个基于countup.js的Vue组件,用于在页面上实现动态计数效果。文章详细说明了如何安装、引用和配置该组件,以及其关键属性如起始值、结束值、动画时间和配置选项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue-countupjs的前身就是countup.js( 官网:CountUp.js

 依赖安装
npm install vue-countupjs --save
引用注册
import VueCountUp from 'vue-countupjs'


components: { VueCountUp }
使用
 <VueCountUp class="topNumberClass darkBlue"   
                      :start-value="0"        // 起始值
                      :end-value="topData.zhyzcdlbzzm"        // 结束值
                      :options="{ separator: '' }"        // 数字分隔号,默认逗号
                      :duration="2"/>        //动画持续时间
属性配置
属性含义默认值
tag数字包装器span
startValue起始值0
endValue结束值0
decimals小数位数0
duration动画持续时间(单位为秒)2
delay延时更新时间,0为不延时0
immediate是否立即执行动画

true

animateClass执行期间动画, 执行后删除,优先级低于animatedClassnull
animatedClass执行前插入, 执行后删除animated
options配置项见下图以及代码

 

{  
    useEasing: true, // 缓动动画 
    useGrouping: true, 
    separator: ',', // 数字分隔符  
    decimal: '.', // 小数分隔符 
    prefix: '', // 前缀  
    suffix: '' // 后缀
}

### 使用 `vue-countup-v3` 实现数值增长动画 为了在 Vue 项目中实现数值增长动画,可以利用 `vue-countup-v3` 插件。此插件基于 CountUp.js 构建,提供了简单易用的方法来创建动态的数值变化效果。 #### 安装依赖库 首先,在项目根目录下通过 npm 或 yarn 安装所需的包: ```bash npm install vue-countup-v3 ``` 或者使用 Yarn: ```bash yarn add vue-countup-v3 ``` #### 导入并注册组件 接着,在单文件组件 (SFC) 中导入 `CountUp` 并将其作为局部或全局组件进行注册。这里展示了一个简单的例子,其中包含了计数器逻辑以及按钮触发更新的功能[^2]。 ```html <!-- CounterComponent.vue --> <template> <div class="counter"> <h1>{{ formattedNumber }}</h1> <button @click="startAnimation">Start Animation</button> </div> </template> <script> import { ref, onMounted } from 'vue'; import { useCountUp } from 'vue-countup-v3'; export default { setup() { const targetValue = ref(2798); const options = { duration: 2.5, separator: ',', decimals: 0, prefix: '$' }; // 初始化 countUp 对象 const { start, pauseResume, reset, update, getCountUp } = useCountUp({ startValue: 0, endValue: targetValue.value, ...options }); let countUpInstance; onMounted(() => { start(); countUpInstance = getCountUp(); // 获取实例以便后续操作 }); function startAnimation() { // 更新目标值并重新启动动画 targetValue.value += Math.floor(Math.random() * 1000); update(targetValue.value); } return { formattedNumber: () => countUpInstance?.get().toFixed(options.decimals), startAnimation }; } }; </script> <style scoped> .counter h1 { font-size: 4em; } </style> ``` 在这个示例里,当页面加载完成时会自动播放一次从零到指定金额的增长过程;点击 "Start Animation" 按钮则会使当前显示的数字再次增加随机数额,并平滑过渡至新值[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值