Vben CountToAnimator 数字动画

框架提供的数字动画组件，支持数字动画效果。

如果文档内没有参数说明，可以尝试在在线示例内寻找

写在前面

如果你觉得现有组件的封装不够理想，或者不完全符合你的需求，大可以直接使用原生组件，亦或亲手封装一个适合的组件。框架提供的组件并非束缚，使用与否，完全取决于你的需求与自由。

基础用法

通过 start-val 和 end-val设置数字动画的开始值和结束值， 持续时间3000ms。

<script lang="ts" setup>
import { VbenCountToAnimator } from '@vben/common-ui';
</script>
<template>
  <VbenCountToAnimator :duration="3000" :end-val="30000" :start-val="1" />
</template>

自定义前缀及分隔符

通过 prefix 和 separator 设置数字动画的前缀和分隔符。

<script lang="ts" setup>
import { VbenCountToAnimator } from '@vben/common-ui';
</script>
<template>
  <VbenCountToAnimator
    :duration="3000"
    :end-val="2000000"
    :start-val="1"
    prefix="$"
    separator="/"
  />
</template>

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

以下事件，只有在 useVbenModal({onCancel:()=>{}}) 中传入才会生效。

事件名	描述	类型
start	开始执行动画	()=>void
reset	重置	()=>void

贡献者

vben

页面历史

最后编辑于 大约 2 个月前

查看完整历史

5ce3a18-docs: update docs (#4466)