CountTo 数字滚动

数字变化时切换滚动效果，一般用于金额的变化。

导入

import CountTo from '@/components/display/countdown/CountTo.vue';

使用方法

基础用法

<template>
  <CountTo :endValue="9999" />
</template>

设置切换时间

<template>
  <CountTo :startValue="0" :endValue="9999" :duration="8000" />
</template>

添加千分符

<template>
  <CountTo :endValue="9999" thousand />
</template>

手动控制

<template>
  <CountTo ref="counttoRef" :endValue="9999" thousand />
  <Button @click="counttoRef.restart()" type="primary" text="重置" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const counttoRef = ref();
</script>

数字滚动效果

<template>
  <CountTo 
    type="scroller"
    :decimalCount="2"
    :endValue="valueTest"
    :fontSize="60" 
    :duration="300"
  />
  <Button @click="updateText" type="primary" text="更新数字" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const valueTest = ref(999999);

function updateText() {
  valueTest.value = Math.random() * 999999;
}
</script>

API 参考

Props

名称	说明	类型	必填	默认值
startValue	开始值	number	否	0
endValue	结束值	number	是	0
duration	持续时间	number	否	3000
thousand	是否将数字转换为千分符	boolean	否	false
numberCount	数字如果不足该位数，则在前面补0	number	否	0
decimalCount	保留小数位数	number	否	0
type	效果类型。默认：text * text 普通文字切换效果 * scroller 文字上下滚动效果	'text'|'scroller'	否	'text'

实例方法

通过 ref 可以获取到 CountTo 实例并调用实例方法

方法名	说明	参数
restart	重新开始动画	-

主题变量

该组件没有特定的主题变量，样式由基础 Text 组件决定。