nuxt中使用vue-countup-v2的各个参数
在 Nuxt 中使用 vue-countup-v2,需要在页面组件中引入该库:
import CountUp from 'vue-countup-v2'
然后在模板中使用
startVal: 开始值,默认为0endVal: 结束值,必填duration: 动画持续时间(毫秒),默认为2秒decimals: 显示小数位数,默认为0decimal: 小数点符号,默认为"."separator: 千分位分隔符,默认为","prefix: 数值前缀suffix: 数值后缀useEasing: 是否启用缓动效果,默认为trueeasingFn: 缓动函数,可选值: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 的动画效果,数值带有 $ 前缀。
原文地址: https://www.cveoy.top/t/topic/0iF 著作权归作者所有。请勿转载和采集!