How to implement digital scrolling plug-in in Vue3 based on countUp.js

countUp Introduction

CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way. CountUp can count in both directions, depending on the start and end values ​​passed.

Although there are many Vue components based on countUp.js secondary encapsulation on the market, I personally don’t like to use these third-party encapsulations because it is difficult to guarantee the update frequency of third-party components. Maybe the author I just encapsulated and uploaded it on a whim, with no intention of continuing to maintain it. If it is used, it means that it will not be maintainable at all in the future, so I recommend implementing this secondary encapsulation by yourself. We can get familiar with it through this encapsulationvue3 , ts Syntax

countUp component package

First install

npm i countup.js

After installation, create a new file CountUp.vue, The template part is very simple. You only need a span tag, and give span a ref='countupRef'. First introduce countup.js , hold down the Ctrl left button of the mouse and click on Countup.js to see the d.ts file, countUp.d.ts is as follows

export interface CountUpOptions {
    startVal?: number;
    decimalPlaces?: number;
    duration?: number;
    useGrouping?: boolean;
    useIndianSeparators?: 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;
    scrollSpyOnce?: boolean;
    onCompleteCallback?: () => any;
    plugin?: CountUpPlugin;
}
export declare interface CountUpPlugin {
    render(elem: HTMLElement, formatted: string): void;
}
export declare class CountUp {
    private endVal;
    options?: CountUpOptions;
    version: string;
    private defaults;
    private rAF;
    private startTime;
    private remaining;
    private finalEndVal;
    private useEasing;
    private countDown;
    el: HTMLElement | HTMLInputElement;
    formattingFn: (num: number) => string;
    easingFn?: (t: number, b: number, c: number, d: number) => number;
    error: string;
    startVal: number;
    duration: number;
    paused: boolean;
    frameVal: number;
    once: boolean;
    constructor(target: string | HTMLElement | HTMLInputElement, endVal: number, options?: CountUpOptions);
    handleScroll(self: CountUp): void;
    /**
     * Smart easing works by breaking the animation into 2 parts, the second part being the
     * smartEasingAmount and first part being the total amount minus the smartEasingAmount. It works
     * by disabling easing for the first part and enabling it on the second part. It is used if
     * usingEasing is true and the total animation amount exceeds the smartEasingThreshold.
     */
    private determineDirectionAndSmartEasing;
    start(callback?: (args?: any) => any): void;
    pauseResume(): void;
    reset(): void;
    update(newEndVal: string | number): void;
    count: (timestamp: number) => void;
    printValue(val: number): void;
    ensureNumber(n: any): boolean;
    validateValue(value: string | number): number;
    private resetDuration;
    formatNumber: (num: number) => string;
    easeOutExpo: (t: number, b: number, c: number, d: number) => number;
}

Here exported a CountUp The class also has an interface of CountUpOptions. The constructor of the CountUp class receives three parameters, namely dom node, endVal, and options. We will The three parameters are passed in as props and given default values. First, get the ref of span as a container for countUp initialization, and define a variable numAnim to receive# The return value of ##new CountUp(countupRef.value, props.end, props.options), , is initialized in onMountedcountUp.js, then we can go The page introduces CountUp.vue to see the effect. Because there is a default value, we don’t need to pass in any parameters, just look at it. At this time, the CountUp.vue component code is as follows:

<script setup lang="ts">
  import { CountUp } from &#39;countup.js&#39;
  import type { CountUpOptions } from &#39;countup.js&#39;
  import { onMounted, ref } from &#39;vue&#39;

  let numAnim = ref(null) as any
  const countupRef = ref()
  const props = defineProps({
    end: {
      type: Number,
      default: 2023
    },
    options: {
      type: Object,
      default() {
        let options: CountUpOptions = {
          startVal: 0, // 开始的数字  一般设置0开始
          decimalPlaces: 2, // number类型 小数位，整数自动添.00
          duration: 2, // number类型 动画延迟秒数，默认值是2
          useGrouping: true, // boolean类型  是否开启逗号，默认true(1,000)false(1000)
          useEasing: true,  // booleanl类型 动画缓动效果(ease),默认true
          smartEasingThreshold: 500, // numberl类型 大于这个数值的值开启平滑缓动
          smartEasingAmount: 300, // numberl类型
          separator: &#39;,&#39;,// string 类型 分割用的符号
          decimal: &#39;.&#39;, // string 类型  小数分割符合
          prefix: &#39;￥&#39;, // sttring 类型  数字开头添加固定字符
          suffix: &#39;元&#39;, // sttring类型 数字末尾添加固定字符
          numerals: []  // Array类型 替换从0到9对应的字，也就是自定数字字符了,数组存储
        }
        return options
      }
    }
  })
  onMounted(() => {
    initCount()
  })
  const initCount = () => {
    numAnim = new CountUp(countupRef.value, props.end, props.options)
    numAnim.start()
  }
</script>

<template>
  <span ref="countupRef"></span>
</template>

At this time we found that after

onMounted is executed, if our endVal value changes, due to CountUp.vueonMounted It has been completed and will not be modified synchronously. If our value is obtained asynchronously, the result we want will not be rendered, so we need to expose this initCount method to the parent in the component. Component use, in vue3, we only need to use defineExpose to expose it. At the same time, we also further improve our props, verify and limit the incoming optinos value, and try to avoid Use errors, and modify the default values ​​to avoid causing some problems. The final code is as follows

<script setup lang="ts">
  import { CountUp } from &#39;countup.js&#39;
  import type { CountUpOptions } from &#39;countup.js&#39;
  import { onMounted, ref } from &#39;vue&#39;

  let numAnim = ref(null) as any
  const countupRef = ref()
  const props = defineProps({
    end: {
      type: Number,
      default: 0
    },
    options: {
      type: Object,
      validator(option: Object) {
        let keys = [&#39;startVal&#39;, &#39;decimalPlaces&#39;, &#39;duration&#39;, &#39;useGrouping&#39;, &#39;useEasing&#39;, &#39;smartEasingThreshold&#39;, &#39;smartEasingAmount&#39;, &#39;separator&#39;, &#39;decimal&#39;, &#39;prefix&#39;, &#39;suffix&#39;, &#39;numerals&#39;]
        for (const key in option) {
          if (!keys.includes(key)) {
            console.error(" CountUp 传入的 options 值不符合 CountUpOptions")
            return false
          }
        }
        return true
      },
      default() {
        let options: CountUpOptions = {
          startVal: 0, // 开始的数字  一般设置0开始
          decimalPlaces: 2, // number类型 小数位，整数自动添.00
          duration: 2, // number类型 动画延迟秒数，默认值是2
          useGrouping: true, // boolean类型  是否开启逗号，默认true(1,000)false(1000)
          useEasing: true,  // booleanl类型 动画缓动效果(ease),默认true
          smartEasingThreshold: 500, // numberl类型 大于这个数值的值开启平滑缓动
          smartEasingAmount: 300, // numberl类型
          separator: &#39;,&#39;,// string 类型 分割用的符号
          decimal: &#39;.&#39;, // string 类型  小数分割符合
          prefix: &#39;&#39;, // sttring 类型  数字开头添加固定字符
          suffix: &#39;&#39;, // sttring类型 数字末尾添加固定字符
          numerals: []  // Array类型 替换从0到9对应的字，也就是自定数字字符了,数组存储
        }
        return options
      }
    }
  })
  onMounted(() => {
    initCount()
  })
  const initCount = () => {
    numAnim = new CountUp(countupRef.value, props.end, props.options)
    numAnim.start()
  }

  defineExpose({
    initCount
  })
</script>

<template>
  <span ref="countupRef"></span>
</template>

<style scoped lang=&#39;scss&#39;></style>

The above is the detailed content of How to implement digital scrolling plug-in in Vue3 based on countUp.js. For more information, please follow other related articles on the PHP Chinese website!