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 | 重置 |