Q-Digital 数字翻牌器

参考 dataV-数字翻牌器 (opens new window)

<QDigital :config="config" :data="data" style="width:200px;height:50px;"></QDigital>

基本示例

<template>
  <div style="background: black;height: 150px" class="flex-center-cus">
    <QDigital :config="config" :data="data" style="width:200px;height:50px;"></QDigital>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          content: '{nt}个',
          toFixed: 2,
        },
        data: [10000]
      }
    }
  }
</script>
<style>

</style>

Expand Copy Copy

多数值示例

<template>
  <div style="background: black;height: 150px" class="flex-center-cus">
    <QDigital :config="config" :data="data" style="width:200px;height:50px;"></QDigital>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          content: '{nt}个{nt}元'
        },
        data: [10, 100],
      }
    }
  }
</script>
<style>

</style>

Expand Copy Copy

千分位分隔符示例

<template>
  <div style="background: black;height: 150px" class="flex-center-cus">
    <QDigital :config="config" :data="data" style="width:200px;height:50px;" :is-formatter="true"></QDigital>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          content: '{nt}个',
        },
        data: [123456]
      }
    }
  }
</script>
<style>

</style>

Expand Copy Copy

Attributes

config 属性

属性名	说明	类型	可选值	默认值
number(对应:data)	数字数值 [1]	Array<Number>	—	[]
content	内容模版[1]	String	—	''
toFixed	小数位数	Number	—	0
textAlign	水平对齐方式	String	'center'/'left' /'right'	'center'
rowGap	行间距	Number	[2]	0
style	样式配置	Object	CRender Style (opens new window)	[3]
animationCurve	动效曲线	String	Transition (opens new window)	'easeOutCubic'
animationFrame	动画时长	Number	—	50
isFormatter	开启格式化	Boolean	—	false
formatter	格式化函数	Function	[4]	千分位

config 注释

[1]number中的元素将被用于替换content内容模版中的{nt}标记，其替换顺序与模版标记的顺序一一对应：

const number = [1, 2, 3, 4]
const content = '数字{nt},数字{nt},数字{nt},数字{nt}'
// 实际显示效果：'数字1,数字2,数字3,数字4'

[2]当使用\n进行换行的时候，rowGap可以控制行间距。

[3]style是CRender (opens new window)中用于配置样式的类，可使用fill属性设置字体颜色、stroke属性设置字体描边颜色、fontSize属性设置文字大小，更多配置请查阅CRender Style (opens new window)。

[4]当需要格式化数字时，例如数字千分位插入逗号分隔符,也可以进行自定义。

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
}