LCountTo

组件属性

属性名	说明	类型	默认值	必填	验证规则
startVal	起始值	number	0	否	-
endVal	结束值	number	2017	否	-
duration	动画持续时间(毫秒)	number	3000	否	-
autoplay	是否自动播放	boolean	true	否	-
decimals	小数位数	number	0	否	必须 >= 0
decimal	小数点符号	string	'.'	否	-
separator	千分位分隔符	string	','	否	不能是数字
prefix	前缀	string	''	否	-
suffix	后缀	string	''	否	-
useEasing	是否使用缓动函数	boolean	true	否	-
easingFn	自定义缓动函数	Function	默认函数	否	-

组件事件

事件名	说明	回调参数
mountedCallback	组件挂载后触发	-
callback	动画完成后触发	-

组件方法

通过组件 ref 调用：

方法名	说明
start()	开始/重新开始动画
pause()	暂停动画
resume()	恢复动画
reset()	重置到初始状态
pauseResume()	切换暂停/恢复状态

组件示例

loading

组件使用

<template>
  <LCountTo
    :start-val="0"
    :end-val="5000"
    :duration="4000"
    :decimals="2"
    separator=","
    prefix="$"
    suffix="元"
  />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { LCountTo } from '@vue3-simple-bui/screen';

export default defineComponent({
  name: 'Demo',
  components: {
    LCountTo,
  },
});
</script>