# 数字翻牌器

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] styleCRender (opens new window)中用于配置样式的类,可使用fill属性设置字体颜色、stroke属性设置字体描边颜色、fontSize属性设置文字大小,更多配置请查阅CRender Style (opens new window)

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

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

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