vue-countup-v3
Advanced tools
Readme
基于 countup.js 封装的 vue3 计数动画组件，并扩展一些功能。
Vue 3 component for animation counting， wrap for countUp.js and expand some features.
npm
npm i vue-countup-v3
yarn
yarn add 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')
countUp?.reset()
}
</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>
以下属性同 coutup.js 配置项（same as countup.js properties）
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
| endVal | Number | String | - | 结束值 | |
| startVal | Number | String | 0 | 起始值 | |
| duration | Number | 2.5 | 动画时长，单位：秒 | |
| decimalPlaces | Number | 0 | 小数点位数 | 1.1.0 |
| options | Object | - | countUp.js options 配置项 |
以下为组件特有属性（extension properties）
| Name | Type | Default | Description |
|---|---|---|---|
| autoplay | Boolean | true | 是否自动计数 |
| loop | Boolean | Number | false | 循环次数，有限次数 / 无限循环 |
| delay | Number | 0 | loop 循环的间隔时间，单位：秒 |
| Name | Description |
|---|---|
| prefix | 前缀 |
| suffix | 后缀 |
| Name | Description | return |
|---|---|---|
| @init | CountUp 实例初始化完成触发 | CountUp 实例 |
| @finished | 计数结束时触发 | - |
import type {
ICountUp,
CountUpOptions
} from 'vue-countup-v3'
see more countUp.js
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) 是否使用千分位
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 目标进入可视范围内后的延迟时间(毫秒)
}
开始计数
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,996 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
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.