data_view/docs/guide/digitalFlop.md

---

sidebarDepth: 2

数字翻牌器

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

基本示例

<<< @/docs/guide/codeData/digitalFlop/demo1.js

浮点数

<<< @/docs/guide/codeData/digitalFlop/demo2.js

多数值

<<< @/docs/guide/codeData/digitalFlop/demo3.js

config属性

属性|说明|类型|可选值|默认值 :--:|:--:|:--:|:--:|:--: number|数字数值^[1]|Array<Number>|---|[] content|内容模版^[1]|String|---|'' toFixed|小数位数|Number|---|0 textAlign|水平对齐方式|String|[2]|'center' style|样式配置|Object|CRender Style|[3] animationCurve|动效曲线|String|Transition|'easeOutCubic' animationFrame|动效帧数|Number|[4]|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] style是CRender中用于配置样式的类，可使用fill属性设置字体颜色、stroke属性设置字体描边颜色、fontSize属性设置文字大小，更多配置请查阅CRender Style。

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

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