Cara melaksanakan pemalam tatal digital dalam Vue3 berdasarkan countUp.js

Memperkenalkan countUp

CountUp.js ialah kelas JavaScript yang ringan dan bebas pergantungan yang boleh digunakan untuk mencipta animasi dengan cepat yang memaparkan data berangka dengan cara yang lebih menarik. CountUp boleh mengira dalam kedua-dua arah, bergantung pada nilai mula dan akhir yang dilalui.

Walaupun terdapat banyak komponen Vue berdasarkan pengkapsulan sekunder countUp.js di pasaran, saya secara peribadi tidak suka menggunakan pengkapsulan pihak ketiga ini kerana sukar untuk menjamin kekerapan kemas kini komponen pihak ketiga . Mungkin pengarang saya hanya merangkum dan memuat naiknya secara sesuka hati, tanpa niat untuk terus mengekalkannya Jika digunakan, bermakna ia tidak akan dapat dikekalkan pada masa hadapan, jadi saya mengesyorkan untuk melaksanakan enkapsulasi sekunder ini. sendiri. Kita boleh membiasakannya melalui enkapsulasi ini vue3, ts Sintaks

pakej komponen countUp

Pasang pertama

npm i countup.js

Selepas pemasangan, buat fail baharu CountUp.vue, bahagian templat sangat mudah, hanya satu teg span diperlukan, dan pada masa yang sama Beri span ref='countupRef' dan selesai mula-mula perkenalkan countup.js butang tetikus dan klik pada Countup.js untuk melihat fail d.ts countUp.d.ts dieksport ke sini seperti berikut:

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;
}

Kelas CountUp juga mempunyai antara muka CountUpOptions daripada kelas CountUp menerima tiga parameter, iaitu nod dom, endVal dan pilihan Kami menghantar tiga parameter ini sebagai constructor Pada masa yang sama, berdasarkan nilai lalai, mula-mula dapatkan ref span sebagai bekas. dimulakan oleh props, tentukan pembolehubah countUp untuk menerima nilai pulangan numAnim, , mulakan new CountUp(countupRef.value, props.end, props.options) dalam onMounted, dan kemudian kita boleh pergi Halaman memperkenalkan countUp.js untuk melihat kesannya ialah nilai lalai, kami tidak perlu memasukkan mana-mana parameter Lihat sahaja pada masa ini, CountUp.vue kod komponen adalah seperti berikut, CountUp.vue

<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>

Pada masa ini kami mendapati bahawa, Selepas

dilaksanakan, jika nilai endVal kami berubah, memandangkan onMounted CountUp.vue telah selesai, ia tidak akan diubah suai secara serentak Jika nilai kami diperoleh secara tidak segerak, ia akan menyebabkan pemaparan yang kami mahu gagal. Hasilnya, maka kami perlu mendedahkan kaedah onMounted ini dalam komponen kepada komponen induk Dalam vue3, kami hanya perlu menggunakan initCount untuk mendedahkannya Pada masa yang sama, kami juga menambah baik prop kami dan mengesahkan Hadkan nilai defineExpose masuk dan cuba elakkan ralat penggunaan Pada masa yang sama, ubah suai nilai lalai untuk mengelakkan beberapa masalah Kod akhir adalah seperti berikut optinos

<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>

Atas ialah kandungan terperinci Cara melaksanakan pemalam tatal digital dalam Vue3 berdasarkan countUp.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!