Vueuse 实现数字滚动 Count-to

![recording](http://banmag.cn:8089/i/2024/07/15/6694cf5aad73b.gif)

element-plus的 `Statistic` 统计组件也有数字滚动的效果，其实就是用vueuse的`useTransition`

useTransition 文档地址：https://vueuse.org/core/useTransition/#usetransition

vueuse 确实是个宝藏库，在此强烈推荐。

~~~bash
npm i @vueuse/core
~~~

组件具有3 个参数：

- num: 显示的数字
- duration: 动画持续时间，默认 1000
- precision: 数字精度，默认 0

```vue
<MoCountTo :num="198" />
<MoCountTo :num="198" :duration="2000" :precision="2" />
```

## MoCountTo组件代码

组件代码的实现很简单，如下：

```vue
<template>
  <span> {{ formattedOutputValue }}</span>
</template>

interface Props {
  num: number
  duration?: number
  precision?: number // 数字精度
}

const props = defineProps<Props>()
const source = ref(0)
let outputValue = useTransition(source, {
  duration: props.duration || 1000
})

const precision = ref(
  props.precision !== undefined && Number.isInteger(props.precision) ? props.precision : 0
)
const formattedOutputValue = computed(() => outputValue.value.toFixed(precision.value))

watch(
  () => props.num,
  async (newVal) => {
    if (Number.isNaN(newVal)) {
      console.warn('Invalid number provided, defaulting to 0.')
      newVal = 0
    }

await nextTick()
    source.value = newVal
  },
  { immediate: true }
)
</script>
```

## 项目地址

本项目GIT地址：https://github.com/lucidity99/mocha-vue3-system