在 Nuxt 中使用 vue-countup-v2,需要在页面组件中引入该库:

import CountUp from 'vue-countup-v2'

然后在模板中使用 标签,可以传递以下参数:

  • startVal: 开始值,默认为0
  • endVal: 结束值,必填
  • duration: 动画持续时间(毫秒),默认为2秒
  • decimals: 显示小数位数,默认为0
  • decimal: 小数点符号,默认为"."
  • separator: 千分位分隔符,默认为","
  • prefix: 数值前缀
  • suffix: 数值后缀
  • useEasing: 是否启用缓动效果,默认为true
  • easingFn: 缓动函数,可选值:easeOutExpo、easeInOutExpo、easeInQuad、easeOutQuad、easeInOutQuad、easeInCubic、easeOutCubic、easeInOutCubic、easeInQuart、easeOutQuart、easeInOutQuart、easeInQuint、easeOutQuint、easeInOutQuint、easeInSine、easeOutSine、easeInOutSine、easeInExpo、easeOutExpo、easeInOutExpo、easeInCirc、easeOutCirc、easeInOutCirc、easeInElastic、easeOutElastic、easeInOutElastic、easeInBack、easeOutBack、easeInOutBack、easeInBounce、easeOutBounce、easeInOutBounce,默认为 easeOutExpo。

例如:

<count-up :start-val="0" :end-val="1000" :duration="2000" :decimals="0" separator="." prefix="$"></count-up>

这样就可以在页面上显示一个数值从 0 到 1000 的动画效果,数值带有 $ 前缀。

nuxt中使用vue-countup-v2的各个参数

原文地址: https://www.cveoy.top/t/topic/0iF 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录