- Exciting release!Introducing "safe npm". Learn more →
vue-countup-v3
Advanced tools
- Version published
- Maintainers
- 1
- Weekly downloads
- 1,014
- decreased by-7.23%
Weekly downloads
Readme
vue-countup-v3 
基于 countup.js 封装的 vue3 计数动画组件，并扩展一些功能。
Vue 3 component for animation counting， wrap for countUp.js and expand some features.
Try the demo
Installation
npm
npm i vue-countup-v3
yarn
yarn add vue-countup-v3
cdn
cdn 方式引入，暴露的全局变量为 VueCountUp<!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>
Usage
简单示例（simple usage）
<script setup lang="ts">
import CountUp from 'vue-countup-v3'
</script>
<template>
<count-up :end-val="2000"></count-up>
</template>
插槽示例（slot usage）
当 prefix / suffix 需要与数值样式区分开时，可使用插槽的方式取代 options 中的 prefix / suffix 配置。<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>
完整示例（full usage）
<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>
属性（Properties）
以下属性同 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 循环的间隔时间，单位：秒 |
插槽（slots）
| Name | Description |
|---|---|
| prefix | 前缀 |
| suffix | 后缀 |
事件（Events）
| Name | Description | return |
|---|---|---|
| @init | CountUp 实例初始化完成触发 | CountUp 实例 |
| @finished | 计数结束时触发 | - |
类型定义 （Type Definition）
import type {
ICountUp,
CountUpOptions
} from 'vue-countup-v3'
coutup.js 说明
see more countUp.js
配置项（Options ）
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 目标进入可视范围内后的延迟时间(毫秒)
}
方法（Methods）
开始计数
countUp.start()
Toggle pause/resume 切换暂停/恢复
countUp.pauseResume()
Reset the animation: 重置数值
countUp.reset()
Update the end value and animate: 修改结束值且继续动画
countUp.update(1000)
License
MIT
FAQs
Vue 3 component wrap for countUp.js，and expand some features.
The npm package vue-countup-v3 receives a total of 826 weekly downloads. As such, vue-countup-v3 popularity was classified as not 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 installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.