noop(); pop(); map();

    vue-countup-v3
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    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)

    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

    Install

    npm i vue-countup-v3

    DownloadsWeekly Downloads

    569

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    39.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • jizai1125