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

属性	类型	默认值	说明
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	重置