#数字翻牌器
# 数字翻牌器
（React版 (opens new window)）
点击复制 # 基本示例 切换数据 点击以展示/隐藏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
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用于配置动画过程的帧数即动画时长。