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

::: anchor :::

::: title 基础使用 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { 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 Count Up 属性 :::

::: table

属性	描述	类型	默认值	可选值
startVal	起始值	number	0	—
endVal	显示的值	number	0	—
decimal	小数点	string	.	—
decimalPlaces	小数位数	number	0	—
useGrouping	是否使用千位分隔符	boolean	true	true false
separator	分隔符	string	,	—
autoplay	是否自动播放	boolean	true	true false
useEasing	是否使用动画	boolean	true	true false
easingFn	动画类型	Array | Function | string	easeInOutCubic	—
duration	动画持续时间,单位: ms	number	2000	—
prefix	前缀	string	—	—
suffix	后缀	string	—	—

:::

::: title Count Up 插槽 :::

::: table

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

:::

::: title Count Up 动画类型 :::

::: describe 可使用贝塞尔曲线定义动画 :::

easingFn: [0.75, 0, 0.25, 1]

::: describe 也可以使用自定义函数 :::

const easeOutElastic = (n) => {
  return n === 0
    ? 0
    : n === 1
      ? 1
      : (2 ** (-10 * n)) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
}

easingFn: easeOutElastic

::: describe 通过以下字符串快速设置动画类型 :::

easeInSine    easeOutSine    easeInOutSine
easeInQuad    easeOutQuad    easeInOutQuad
easeInCubic   easeOutCubic   easeInOutCubic
easeInQuart   easeOutQuart   easeInOutQuart
easeInQuint   easeOutQuint   easeInOutQuint
easeInExpo    easeOutExpo    easeInOutExpo
easeInCirc    easeOutCirc    easeInOutCirc
easeInBack    easeOutBack    easeInOutBack
linear

::: previousNext countUp :::