vue-countup-v3
Advanced tools
Readme
A Vue 3 component for animation counting, wrap for countUp.js(v2.6.2) and expand some features.
npm
npm i vue-countup-v3
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app">
<count-up :end-val="2000"></count-up>
</div>
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue-countup-v3@latest/dist/vue-countup-v3.iife.js"></script>
<script>
const app = Vue.createApp({})
app.component('CountUp', VueCountUp)
app.mount('#app')
</script>
</body>
</html>
简单示例（simple usage）
<script setup lang="ts">
import CountUp from 'vue-countup-v3'
</script>
<template>
<count-up :end-val="2000"></count-up>
</template>
<script setup lang="ts">
import CountUp from 'vue-countup-v3'
</script>
<template>
<count-up :end-val="2000">
<template #prefix>
<span style="color: orange">prefix</span>
</template>
<template #suffix>
<span style="color: red">prefix</span>
</template>
</count-up>
</template>
<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>
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3';
export default defineNuxtConfig({
build: {
transpile: ['vue-countup-v3'],
},
});
<CountUp client:load client:only end-val={2000} />
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
| endVal | Number | String | - | 结束值 | |
| startVal | Number | String | 0 | 起始值 | |
| duration | Number | 2.5 | 动画时长，单位：秒 | |
| decimalPlaces | Number | 0 | 小数点位数 | 1.1.0 |
| autoplay | Boolean | true | 是否自动计数 | |
| loop | Boolean | Number | false | 循环次数，有限次数 / 无限循环 | |
| delay | Number | 0 | loop 循环的间隔时间，单位：秒 | |
| options | Object | - | countUp.js Options |
| Name | Description |
|---|---|
| prefix | 前缀 |
| suffix | 后缀 |
| Name | Description | return |
|---|---|---|
| @init | CountUp 实例初始化完成触发 | CountUp 实例 |
| @finished | 计数结束时触发 | - |
import type {
ICountUp,
CountUpOptions
} from 'vue-countup-v3'
interface CountUpOptions {
startVal?: number // number to start at (0) 开始数值，默认 0
decimalPlaces?: number // number of decimal places (0) 小数点 位数
duration?: number // animation duration in seconds (2) 动画时长
useGrouping?: boolean // example: 1,000 vs 1000 (true) 是否使用千分位
useIndianSeparators?: boolean; // example: 1,00,000 vs 100,000 (false)
useEasing?: boolean // ease animation (true) 是否开启动画过渡，默认动画函数为 easeOutExpo
smartEasingThreshold?: number // smooth easing for large numbers above this if useEasing (999)
smartEasingAmount?: number // amount to be eased for numbers above threshold (333)
separator?: string // grouping separator (',') 千分位分隔符
decimal?: string // decimal ('.') 小数点分隔符
// easingFn: easing function for animation (easeOutExpo) 动画函数
easingFn?: (t: number, b: number, c: number, d: number) => number
formattingFn?: (n: number) => string // this function formats result 格式化结果
prefix?: string // text prepended to result 数值前缀
suffix?: string // text appended to result 数值后缀
numerals?: string[] // numeral glyph substitution 数字符号替换 0 - 9，例如替换为 [a,b,c,d,e,f,g,h,i,j]
enableScrollSpy?: boolean // start animation when target is in view 在可视范围内才开始动画
scrollSpyDelay?: number // delay (ms) after target comes into view 目标进入可视范围内后的延迟时间(毫秒)
scrollSpyOnce?: boolean; // run only once
onCompleteCallback?: () => any; // gets called when animation completes
plugin?: CountUpPlugin; // for alternate animations
}
see more countUp.js
开始计数（Start animation）
countUp.start()
切换暂停/恢复（Toggle pause/resume）
countUp.pauseResume()
重置数值（Reset the animation）
countUp.reset()
修改结束值且继续动画（Update the end value and animate）
countUp.update(1000)
MIT
FAQs
Vue 3 component wrap for countUp.js，and expand some features.
The npm package vue-countup-v3 receives a total of 2,596 weekly downloads. As such, vue-countup-v3 popularity was classified as popular.
We found that vue-countup-v3 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.