DigitCounter 数字计数

介绍

数字计数器动效。

基础用法

通过 value 属性来设置数字值。

<vd-digit-counter :value="123456" />

小数位展示

通过 decimals 属性来设置小数位。

<vd-digit-counter :value="123456" :decimals="2" />

自动匹配小数位

通过设置 decimals 属性为 auto 来自动匹配小数位。

<vd-digit-counter :value="123456.78" decimals="auto" />

千分位展示

通过 thousands 属性来设置千分位展示。

<vd-digit-counter :value="123456" :thousands="true" />

设置初始数值

通过 default-value 属性来设置初始数值。

<vd-digit-counter :value="123456" :default-value="-2001" />

自定义格式化展示

通过 formatter 属性来自定义格式化展示。

<vd-digit-counter :value="123456" :formatter="numFormatter" />

function numFormatter(value: number) {
  return value.toFixed(0).split('').map(s => `[${s}]`).join('');

  // const chars = ['α', 'β', 'γ', 'δ', 'ε', 'ϝ', 'ζ', 'η', 'θ'];
  // const chars = ['⓪' , '①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨'];
  // const chars = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
  // return value.toFixed(0).split('').map(s => chars[Number(s)]).join('');
}

API

Props

参数	说明	类型	默认值
value	数值	string | number	-
default-value	默认数值	string | number	0
duration	动画时长，单位 ms	string | number	2000
decimals	保留的小数位，自动匹配时为 auto	string | number	0
thousands	是否千分位展示	boolean	false
autoplay	是否自动开始动画	boolean	true
easing	动画过渡方法	EasingTimeline	easing('ease')
formatter	展示字符格式化方法	DigitCounterFormatter	-
prefix	前缀字符	string	-
suffix	后缀字符	string	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	值改变时触发	number
start	开始时触发	number
complete	完成时触发	number

Expose

方法名	说明	参数	返回值
start	开始	-	-
pause	暂停	-	-
stop	停止	-	-
restart	重新开始	-	-