CountTo

数字动画组件

该组件对 vue-countTo 进行了重构,改造成适配 vue3 语法的组件。

Usage

<template>
  <CountTo prefix="$" :color="'#409EFF'" :startVal="1" :endVal="200000" :duration="8000" />
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { CountTo } from '/@/components/CountTo/index';

  export default defineComponent({
    components: {
      CountTo,
    },
  });
</script>

Props

属性类型默认值说明
startValnumber0起始值
endValnumber2021结束值
durationnumber1500动画持续时间
autoplaybooleantrue自动执行
prefixstring-前缀
suffixstring-后缀
separatorstring,分隔符
colorstring-字体颜色
useEasingbooleantrue是否开启动画
transitionstringlinear动画效果
decimalsnumber0保留小数点位数

Methods

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