# CountTo

数字动画组件

该组件对 [vue-countTo](https://github.com/PanJiaChen/vue-countTo) 进行了重构，改造成适配 vue3 语法的组件。

## 代码演示

<CodePreview src="/doc-comp/countTo" :height="300">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper title="数字动画示例">
    <ACard>
      <ACardGrid class="count-to-demo-card">
        <CountTo prefix="$" :color="'#409EFF'" :startVal="1" :endVal="200000" :duration="8000" />
      </ACardGrid>
      <ACardGrid class="count-to-demo-card">
        <CountTo
          suffix="$"
          :color="'red'"
          :startVal="1"
          :endVal="300000"
          :decimals="2"
          :duration="6000"
        />
      </ACardGrid>
      <ACardGrid class="count-to-demo-card">
        <CountTo
          suffix="$"
          :color="'rgb(0,238,0)'"
          :startVal="1"
          :endVal="400000"
          :duration="7000"
        />
      </ACardGrid>
      <ACardGrid class="count-to-demo-card">
        <CountTo
          separator="-"
          :color="'rgba(138,43,226,.6)'"
          :startVal="10000"
          :endVal="500000"
          :duration="8000"
        />
      </ACardGrid>
    </ACard>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { CountTo, PageWrapper } from '@eciol/ant-ui';
</script>
<style lang="less" scoped>
  .count-to-demo {
    &-card {
      width: 50%;
      font-size: 30px;
      text-align: center;
    }
  }
</style>

```
</details>
</CodePreview>

## Usage

```vue
<template>
  <CountTo prefix="$" :color="'#409EFF'" :startVal="1" :endVal="200000" :duration="8000" />
</template>
<script lang="ts" setup>
  import { CountTo } from '@eciol/ant-ui';
</script>
```

## Props

| 属性       | 类型      | 默认值   | 说明           |
| ---------- | --------- | -------- | -------------- |
| startVal   | `number`  | `0`      | 起始值         |
| endVal     | `number`  | `2021`   | 结束值         |
| duration   | `number`  | `1500`   | 动画持续时间   |
| autoplay   | `boolean` | `true`   | 自动执行       |
| prefix     | `string`  | -        | 前缀           |
| suffix     | `string`  | -        | 后缀           |
| separator  | `string`  | `,`      | 分隔符         |
| color      | `string`  | -        | 字体颜色       |
| useEasing  | `boolean` | `true`   | 是否开启动画   |
| transition | `string`  | `linear` | 动画效果       |
| decimals   | `number`  | `0`      | 保留小数点位数 |

## Methods

| 名称  | 回调参数   | 说明         |
| ----- | ---------- | ------------ |
| start | `()=>void` | 开始执行动画 |
| reset | `()=>void` | 重置         |