vue-countup-v3
基于 countup.js 封装的 vue3 计数动画组件,并扩展一些功能。( Vue 3 component for animation counting,counting up or down, etc. wrap for countUp.js and expand some features. )
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 配置。
<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 CountUp from 'vue-countup-v3'
import type { ICountUp, CountUpOptions } from 'vue-countup-v3'
const options: CountUpOptions = {
decimalPlaces: 2
}
let countUp: ICountUp
const onInit = (ctx: ICountUp) => {
console.log('init', ctx)
countUp = ctx
}
const onFinished = () => {
console.log('finished')
}
</script>
<template>
<count-up
:end-val="2000"
:duration="2.5"
: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 |
---|
endVal | Number | String | - | 结束值 |
startVal | Number | String | 0 | 起始值 |
duration | Number | 2.5 | 动画时长,单位:秒 |
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
decimalPlaces?: number
duration?: number
useGrouping?: boolean
useEasing?: boolean
smartEasingThreshold?: number
smartEasingAmount?: number
separator?: string
decimal?: string
easingFn?: (t: number, b: number, c: number, d: number) => number
formattingFn?: (n: number) => string
prefix?: string
suffix?: string
numerals?: string[]
enableScrollSpy?: boolean
scrollSpyDelay?: number
}
方法(Methods)
开始计数
countUp.start()
Toggle pause/resume 切换暂停/恢复
countUp.pauseResume()
Reset the animation: 重置数值
countUp.reset()
Update the end value and animate: 修改结束值且继续动画
countUp.update(1000)
License
MIT