雷雨 _℃ ⛈

:::

::: 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 :::

4.3 KiB Raw Blame History

雷雨 ℃ ⛈

4.3 KiB

Raw Blame History

雷雨 _℃ ⛈