Count to (@web-baseline/count-to)

✨ 组合式函数：指定的持续时间内计数到目标数字 ✨

无依赖的 Vue 组合式函数，可自定义缓动函数，监听输入值的变化自动进行计数动画，支持 SSR。 借鉴自 vue-countTo。

如何使用

安装

npm install @web-baseline/count-to

使用例

<template>
  <span>￥ {{ formatted }} (CNY)</span>
</template>

<script lang="ts" setup>
import { useCountTo } from '@web-baseline/count-to';

const value = ref(1234);
const current = useCountTo(value, { duration: 1000 });
const formatted = computed(() => current.toLocaleString(undefined, { maximumFractionDigits: 0 }));
</script>

Parameters

| Parameter | Property | Description | Type | Default | | --------- | -------- | ----------------------------------------- | ------------------------------------------------------------------- | ------- | | value | -- | 输入值 | MaybeRefOrGetter<number> | -- | | options | duration | 持续时间 | number | 3000 | | options | easingFn | 缓动函数（第三个参数与 vue-countTo 不同） | (t: number, from: number, to: number, duration: number) => number | ... |

Parameters

| Property | Description | Type | | -------- | ----------------------------------------------- | --------------------- | | -- | 当前显示的值（在组件 mounted 之前与输入值相同） | ReadonlyRef<number> |