layui/example/docs/zh-CN/components/countup.md

::: anchor :::

::: title 基础使用 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const countVal = 2862.9888; return { } } } </script>

:::

::: title 自定义前缀&后缀 :::

::: demo

雷雨  _℃ ⛈

更新 <script> import { ref } from 'vue' export default { setup() { const countVal2 = ref(98626); const handlerClick = () => { countVal2.value += 1000; } return { handlerClick, } } } </script>

:::

::: title countUp 属性 :::

::: table

属性	描述	类型	默认值	可选值
endVal	显示的值	number	0	—
decimalPlaces	小数位数	number	0	—
useGrouping	使用千位分隔符	boolean	true	true false
separator	分隔符	string	,	—
useEasing	使用动画	boolean	true	true false
duration	动画持续时间	number	2	—
prefix	前缀	string	—	—
suffix	后缀	string	—	—
option	选项，用于多实例的总体设置， props会覆盖option的属性，使用更灵活	CountUpOptions	—	参见CountUpOptions

:::

::: title CountUpOptions 属性 :::

::: table

属性	描述	类型	默认值	可选值
startVal	开始值	number	0	—
decimalPlaces	小数位数	number	0	—
useGrouping	使用千位分隔符	boolean	true	true false
separator	分隔符	string	,	—
useEasing	使用动画	boolean	true	true false
duration	动画持续时间	number	2	—
prefix	前缀	string	—	—
suffix	后缀	string	—	—

:::

::: title countUp 插槽 :::

::: table

名称	描述	参数
prefix	前缀	--
suffix	后缀	--

:::