# 数字翻牌器
(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
用于配置动画过程的帧数即动画时长。