DataV - Vue3

Appearance

数字翻牌器 ​

数字翻牌器

基础用法 ​

查看代码
vue
<template>
  <div small-bg>
    <dv-digital-flop :config="config1" />
    <button btn @click="changeConfig">
      增加数据
    </button>
  </div>
</template>
<script lang="ts" setup>
const config1 = reactive({
  number: [100],
  content: '{nt}个',
})

const changeConfig = () => {
  config1.number[0] += Math.random() * 100
}
</script>

浮点数 ​

查看代码
vue
<template>
  <div small-bg>
    <dv-digital-flop :config="config1" />
    <button btn @click="changeConfig">
      增加数据
    </button>
  </div>
</template>
<script lang="ts" setup>
const config1 = reactive({
  number: [100.28],
  content: '{nt}个',
  toFixed: 2,
})

const changeConfig = () => {
  config1.number[0] += Math.random() * 10
}
</script>

多数值 ​

查看代码
vue
<template>
  <div small-bg>
    <dv-digital-flop :config="config1" />
    <button btn @click="changeConfig">
      增加数据
    </button>
  </div>
</template>
<script lang="ts" setup>
const config1 = reactive({
  number: [10, 100],
  content: '{nt}个{nt}元',
})

const changeConfig = () => {
  config1.number[0] += Math.random() * 100
  config1.number[1] += Math.random() * 100
}
</script>

千分位分隔符 ​

查看代码
vue
<template>
  <div small-bg>
    <dv-digital-flop :config="config1" />
    <button btn @click="changeConfig">
      增加数据
    </button>
  </div>
</template>
<script lang="ts" setup>
function formatter(number: 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 = reactive({
  number: [123456],
  content: '{nt}个',
  formatter,
})

const changeConfig = () => {
  config1.number[0] += Math.random() * 100
}
</script>

属性 ​

参数说明类型可选值默认值是否必填
number数字数值[1]number[]-[]是
content内容模版[1]string'{nt}个'''否
toFixed小数位数number-0否
textAlign水平对齐方式string'center'/'left'/'right'[2]center否
rowGap行间距number[3]0否
style样式配置ObjectCRender Style[4]否
formatter格式化数字Function[5]undefined否
animationCurve动效曲线stringTransition'easeOutCubic'否
animationFrame动效帧数number[6]50否

注释 ​

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

js
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中用于配置样式的类，可使用fill属性设置字体颜色、stroke属性设置字体描边颜色、fontSize属性设置文字大小，更多配置请查阅CRender Style。

style的默认值是：

css
style: {
  fontSize: 30,
  fill: '#3de7c9'
}

[5] 当需要格式化数字时，例如数字千分位插入逗号分隔符，可以使用formatter来达到效果，number属性中的每一个数值元素都将被传递给formatter，返回值将代替原有数值，可参见示例。

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