Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

vue-countup-v3

Package Overview
Dependencies
1
Maintainers
1
Versions
39
Issues
File Explorer

Advanced tools

vue-countup-v3

Vue 3 component wrap for countUp.js,and expand some features.

    1.1.0betalatest
    GitHub

Version published
Maintainers
1
Weekly downloads
1,014
decreased by-7.23%

Weekly downloads

Readme

Source

vue-countup-v3 npm

基于 countup.js 封装的 vue3 计数动画组件,并扩展一些功能。
Vue 3 component for animation counting, wrap for countUp.js and expand some features.

gif

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)

NameTypeDefaultDescriptionVersion
endValNumber | String-结束值
startValNumber | String0起始值
durationNumber2.5动画时长,单位:秒
decimalPlacesNumber0小数点位数1.1.0
optionsObject-countUp.js options 配置项

以下为组件特有属性(extension properties)

NameTypeDefaultDescription
autoplayBooleantrue是否自动计数
loopBoolean | Numberfalse循环次数,有限次数 / 无限循环
delayNumber0loop 循环的间隔时间,单位:秒

插槽(slots)

NameDescription
prefix前缀
suffix后缀

事件(Events)

NameDescriptionreturn
@initCountUp 实例初始化完成触发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

Keywords

FAQs

Last updated on 18 Nov 2022

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.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc