DataX

数字翻牌器

<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属性

属性 说明 类型 可选值 默认值
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用于配置动画过程的帧数即动画时长。

← 轮播表→