Vue3数字滚动插件vue-countup-v3的使用
更新时间：2023年10月30日 10:05:44 作者：I'm Jie
vue-countup-v3 插件是一个基于 Vue3 的数字动画插件，用于在网站或应用程序中创建带有数字动画效果的计数器，本文主要介绍了Vue3数字滚动插件vue-countup-v3的使用，感兴趣的可以了解一下
介绍
vue-countup-v3 插件是一个基于 Vue3 的数字动画插件，用于在网站或应用程序中创建带有数字动画效果的计数器。通过该插件，我们可以轻松地实现数字的递增或递减动画，并自定义其样式和动画效果。该插件可以用于许多场景，例如展示网站页面的访问量，展示应用程序的下载量，以及展示任何需要动态展示数字的场景等。
效果
该插件支持更多的参数自定义，比如数字的样式、动画的播放方向、循环播放等等。通过这些参数，可以实现更加丰富的数字动画效果。一个简单的效果如下：
安装
使用该插件需要安装依赖，可以通过 npm 命令进行安装：
npm i vue-countup-v3
属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| endVal | Number | String | - | 结束值 |
| startVal | Number | String | 0 | 起始值 |
| duration | Number | 2.5 | 动画时长，单位：秒 |
| decimalPlaces | Number | 0 | 小数点位数 |
| autoplay | Boolean | true | 是否自动计数 |
| loop | Boolean | Number | false | 循环次数，有限次数 / 无限循环 |
| delay | Number | 0 | loop 循环的间隔时间，单位：秒 |
| options | Object | - | 配置项 |
事件
| 时间 | 描述 | 返回值 |
|---|---|---|
| @init | CountUp 实例初始化完成触发 | CountUp 实例 |
| @finished | 计数结束时触发 | - |
配置项
| 配置项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| startVal | number | 0 | 开始数值 |
| decimalPlaces | number | 0 | 小数点位数 |
| duration | number | 2 | 动画时长，单位：秒 |
| useGrouping | boolean | true | 是否使用千位分隔符）显示 |
| useIndianSeparators | boolean | false | 是否使用印度数位分隔符 |
| useEasing | boolean | true | 是否开启数字增加过程中的缓动方式 |
| smartEasingThreshold | number | 999 | 设置一个阈值用于调整数字计数器的动画效果 |
| smartEasingAmount | number | 0.5 | 控制着数字变化的缓动效果 |
| separator | string | , | 千分位分隔符 |
| decimal | string | . | 小数点分隔符 |
| easingFn | number | easeOutExpo | 用于控制数字变化的缓动函数 |
| formattingFn | string | - | 用于格式化计数器的值 |
| prefix | string | - | 数值前缀 |
| suffix | string | - | 数值后缀 |
| numerals | string[] | - | 数字符号替换 0 - 9 |
| enableScrollSpy | boolean | true | 在可视范围内才开始动画 |
| scrollSpyDelay | number | 50ms | 目标进入可视范围内后的延迟时间(毫秒) |
| scrollSpyOnce | boolean | false | 滚动到该元素时执行数字滚动动画是否执行一次 |
| onCompleteCallback | - | - | 回调函数，可以在计数结束时执行 |
| plugin | - | - | 用于替换动画效果 |
完整样例
<script setup lang="ts">
import { ref } from 'vue'
import CountUp from 'vue-countup-v3'
import type { ICountUp, CountUpOptions } from 'vue-countup-v3'
const endValueRef = ref(2022.22)
// coutup.js options
const options: CountUpOptions = {
separator: '❤️'
// ...
}
let countUp: ICountUp | undefined
const onInit = (ctx: ICountUp) => {
console.log('init', ctx)
countUp = ctx
}
const onFinished = () => {
console.log('finished')
}
</script>
<template>
<count-up
:end-val="endValueRef"
:duration="2.5"
:decimal-places="2"
:options="options"
:loop="2"
:delay="2"
@init="onInit"
@finished="onFinished"></count-up>
</template>到此这篇关于Vue3数字滚动插件vue-countup-v3的使用的文章就介绍到这了,更多相关Vue3 vue-countup-v3 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
VueTreeselect 参数options的数据转换-参数normalizer解析
这篇文章主要介绍了VueTreeselect 参数options的数据转换-参数normalizer解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
options顾名思义是选项的意思，或称为构造选项。是在创建vue实例时传入的参数，是一个对象。该对象包含哪些属性？每个属性都是什么含义？本篇文章就来带大家详细了解其中的奥秘2021-05-05
这篇文章主要介绍了vue使用once修饰符,使事件只能触发一次问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了vue实现单一筛选、删除筛选条件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了Vuejs第九篇之组件作用域及props数据传递实例详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要为大家详细介绍了vue+spring boot实现校验码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
vue项目中图片选择路径位置static或assets的区别及说明
这篇文章主要介绍了vue项目中图片选择路径位置static或assets的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue中使用过滤器filters的this为undefined的问题
这篇文章主要介绍了vue中使用过滤器filters的this为undefined的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
前端项目常用的三个Skills总结(Vue、React与UI核心Skills)
最近一种新概念在前端社区中受到关注,Skills这个概念很快被React和Vue社区接受,并引发了关于AI编程方式的新思考,这篇文章主要介绍了前端项目常用的三个Skills的相关资料,分别是Vue、React与UI核心Skills,需要的朋友可以参考下2026-05-05
本篇文章主要介绍了Vue.js之视图和数据的双向绑定(v-model)，使用v-model指令,使得视图和数据实现双向绑定，有兴趣的可以了解一下2017-06-06
最新评论