UFUse（1.6.2）

Appearance

On this page

AnimateDigits ​

AnimateDigits 是一个数字展示组件，在数字变动时候可以有动画效果。

依赖项：gsap

使用 ​

vue
<script setup lang="ts">
import AnimateDigits from 'ufuse/src/components/AnimateDigits/index.vue'
import formatNumber from 'ufuse/src/utils/formatNumber'
import { onBeforeUnmount, onMounted, ref } from 'vue'

const value = ref(23810)
let timer: number

function update() {
  value.value = Math.round(Math.random() * 10000)
}

onMounted(() => {
  timer = window.setInterval(update, 2000)
})

onBeforeUnmount(() => {
  if (timer)
    window.clearInterval(timer)
})
</script>

<template>
  <div class="demo">
    <p>
      <AnimateDigits :value="value" />
    </p>
    <p>
      <AnimateDigits :value="value" :step="1" />
    </p>
    <p>
      <AnimateDigits :value="value" once />
    </p>
    <p>
      <AnimateDigits :value="value" :formatter="(v: number) => formatNumber(v, 2)" />
    </p>
    <p>
      <AnimateDigits :value="value" :formatter="(v: number) => `${formatNumber(v, 2)}%`" />
    </p>
    <p>
      <AnimateDigits :value="value" disabled />
    </p>
  </div>
</template>

预览 ​

API ​

ts
export interface AnimateDigitsProps {
  /**
   * 数值
   */
  value: number
  /**
   * 数值变化步长
   * @example 1 避免出现小数
   */
  step?: number
  /**
   * 动画时长，单位：毫秒
   * @default 1000
   */
  duration?: number
  /**
   * 是否只执行一次动画
   */
  once?: boolean
  /**
   * 是否禁用
   * @default false
   */
  disabled?: boolean
  /**
   * 数值格式化函数
   */
  formatter?: (value: number) => number | string
}

export interface AnimateDigitsEvents {
  /**
   * 每一次数值变化动画完成时触发
   */
  (event: 'complete'): void
}

贡献者 ​

xieyuhang