数字翻牌器

（React版 (opens new window)）

<dv-digital-flop :config="config" style="width:200px;height:50px;" />

点击复制

基本示例

切换数据

点击以展示/隐藏config数据

const config1 = {
  number: [100],
  content: '{nt}个'
}

const config2 = {
  number: [999],
  content: '{nt}个'
}

export default [
  config1,
  config2
]

浮点数

切换数据

点击以展示/隐藏config数据

const config1 = {
  number: [100],
  toFixed: 2,
  content: '{nt}个'
}

const config2 = {
  number: [999],
  toFixed: 2,
  content: '{nt}个'
}

export default [
  config1,
  config2
]

多数值

切换数据

点击以展示/隐藏config数据

const config1 = {
  number: [10, 100],
  content: '{nt}个{nt}元'
}

const config2 = {
  number: [100, 1000],
  content: '{nt}个{nt}元'
}

export default [
  config1,
  config2
]

千分位分隔符

切换数据

点击以展示/隐藏config数据

function formatter (number) {
  const numbers = number.toString().split('').reverse()
  const segs = []

  while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

  return segs.join(',').split('').reverse().join('')
}

const config1 = {
  number: [123456],
  content: '{nt}个',
  formatter
}

const config2 = {
  number: [654321],
  content: '{nt}个',
  formatter
}

export default [
  config1,
  config2
]

config属性

属性	说明	类型	可选值	默认值
number	数字数值[1]	Array<Number>	---	[]
content	内容模版[1]	String	---	''
toFixed	小数位数	Number	---	0
textAlign	水平对齐方式	String	[2]	'center'
rowGap	行间距	Number	[3]	0
style	样式配置	Object	CRender Style (opens new window)	[4]
formatter	格式化数字	Function	[5]	undefined
animationCurve	动效曲线	String	Transition (opens new window)	'easeOutCubic'
animationFrame	动效帧数	Number	[6]	50

注释

[1] number中的元素将被用于替换content内容模版中的{nt}标记，其替换顺序与模版标记的顺序一一对应：

const number = [1, 2, 3, 4]
const content = '数字{nt},数字{nt},数字{nt},数字{nt}'
// 实际显示效果：'数字1,数字2,数字3,数字4'

[2] textAlign用于设置文字的水平对齐方式，可选值为'center'|'left'|'right'，该值将覆盖style属性中的textAlign属性。

[3] 当使用\n进行换行的时候，rowGap可以控制行间距。

[4] style是CRender (opens new window)中用于配置样式的类，可使用fill属性设置字体颜色、stroke属性设置字体描边颜色、fontSize属性设置文字大小，更多配置请查阅CRender Style (opens new window)。

// 数字翻牌器style默认配置
style: {
  fontSize: 30,
  fill: '#3de7c9'
}

[5] 当需要格式化数字时，例如数字千分位插入逗号分隔符，可以使用formatter来达到效果，number属性中的每一个数值元素都将被传递给formatter，返回值将代替原有数值，可参见示例。

[6] animationFrame用于配置动画过程的帧数即动画时长。