脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3 vue-countup-v3

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

属性

属性类型默认值描述
endValNumber | String-结束值
startValNumber | String0起始值
durationNumber2.5动画时长，单位：秒
decimalPlacesNumber0小数点位数
autoplayBooleantrue是否自动计数
loopBoolean | Numberfalse循环次数，有限次数 / 无限循环
delayNumber0loop 循环的间隔时间，单位：秒
optionsObject-配置项

事件

时间描述返回值
@initCountUp 实例初始化完成触发CountUp 实例
@finished计数结束时触发-

配置项

配置项类型默认值描述
startValnumber0开始数值
decimalPlacesnumber0小数点位数
durationnumber2动画时长，单位：秒
useGroupingbooleantrue是否使用千位分隔符）显示
useIndianSeparatorsbooleanfalse是否使用印度数位分隔符
useEasingbooleantrue是否开启数字增加过程中的缓动方式
smartEasingThresholdnumber999设置一个阈值用于调整数字计数器的动画效果
smartEasingAmountnumber0.5控制着数字变化的缓动效果
separatorstring,千分位分隔符
decimalstring.小数点分隔符
easingFnnumbereaseOutExpo用于控制数字变化的缓动函数
formattingFnstring-用于格式化计数器的值
prefixstring-数值前缀
suffixstring-数值后缀
numeralsstring[]-数字符号替换 0 - 9
enableScrollSpybooleantrue在可视范围内才开始动画
scrollSpyDelaynumber50ms目标进入可视范围内后的延迟时间(毫秒)
scrollSpyOncebooleanfalse滚动到该元素时执行数字滚动动画是否执行一次
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 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:

相关文章

  • Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

    Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

    本篇文章主要介绍了Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输示例，非常具有实用价值，需要的朋友可以参考下。
    2017-02-02
  • 基于Vue组件化的日期联动选择器功能的实现代码

    基于Vue组件化的日期联动选择器功能的实现代码

    这篇文章主要介绍了基于Vue组件化的日期联动选择器的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • vue3使用vue-count-to组件的实现

    vue3使用vue-count-to组件的实现

    这篇文章主要介绍了vue3使用vue-count-to组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • Vue表单实例代码

    Vue表单实例代码

    Vue.js 是用于构建交互式的 Web 界面的库。这篇文章主要介绍了Vue表单实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-09-09
  • Vue中获取图片高度的两种方法

    Vue中获取图片高度的两种方法

    在使用Vue2开发移动端页面的时候,需要做一个效果,实现的方案是背景渐变,但是想要实现这个效果就必须进行定位,我的背景高度需要在一个十分恰当的位置,但是我的图片会随着移动端页面的变化而发生高度的变化,为什么会变化？所以本文介绍了Vue中获取图片高度的方法
    2024-08-08
  • vue项目设置活性字体过程(自适应字体大小)

    vue项目设置活性字体过程(自适应字体大小)

    这篇文章主要介绍了vue项目设置活性字体过程(自适应字体大小)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • 解决vue的component标签渲染问题

    解决vue的component标签渲染问题

    这篇文章主要介绍了解决vue的component标签渲染问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • Vue如何实现验证码输入交互

    Vue如何实现验证码输入交互

    这篇文章主要介绍了Vue实现验证码输入交互的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
    2020-12-12
  • vue封装组件js版基本步骤

    vue封装组件js版基本步骤

    这篇文章主要为大家介绍了vue封装组件js版基本步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-04-04
  • Vue混入mixins滚动触底的方法

    Vue混入mixins滚动触底的方法

    这篇文章主要介绍了Vue混入mixins滚动触底的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11

最新评论