最近我参与了一个大屏可视化项目，项目要求具有显著的视觉吸引力。大屏可视化通常依赖于图表和数字来展示数据，因此在设计界面时，对于数字的展示效果进行优化显得尤为重要，这不仅可以提升用户体验，还能增强界面的美观性和酷炫程度。
在这个项目中，我接到的具体需求是在用户进入页面时，数字能够滚动出现，并在每次数据变化时保持这一动感效果。
实现效果：
为了实现这一功能，我采用了 Datav 的数字翻牌器， 下面是实现效果的具体步骤：
实现步骤：
1：在Vue项目内安装datav组件库。
npm安装：
npm install @jiaminghi/data-view
或者yarn安装：
yarn add @jiaminghi/data-view
2：引入
根据项目的需求，可以选择全局引入或按需引入组件。由于我在项目中不仅使用了数字翻牌器，还计划使用其他组件，因此我选择全局引入（在 main.js 文件中）：
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
想按需引入的看这里：按需引入（哪个文件使用就在哪个文件引入）：
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)
3：使用
a. 直接使用数字翻牌器的标签：dv-digital-flop
b. ref给翻牌器标签命名
c. :config绑定数据配置项
d: style给样式，宽高一定要给
<dv-digital-flop
ref="digitalRef"
:config="digitalConfig"
style="width:215px;height:31px;padding-left:15px;"
>
</dv-digital-flop>
e: 在data里面初始化:config绑定的数据和原本的数据
digitalConfig: {
number: [0], // 默认数据
textAlign: 'left', //位置
style: {
fontSize: 26, //文字大小
fill: '#00ffff' //文字颜色
}
},
RollData: 9988998899 //要动画效果的数据
f: 由于在页面加载时，结构可能尚未渲染完成，因此使用 setTimeout 来延迟数据更新：
setTimeout(() => {
this.digitalConfig.number = [this.RollData]
this.$refs.digitalRef.update()
}, 300)
下面是页面完整代码（直接cv可用）：
<template>
<div class="datavCom">
<dv-digital-flop
ref="digitalRef"
:config="digitalConfig"
style="width:215px;height:31px;padding-left:15px;"
>
</dv-digital-flop>
</div>
</template>
<script>
export default {
name: '',
data () {
return {
digitalConfig: {
number: [0], // 默认数据
textAlign: 'left', //位置
style: {
fontSize: 26, //文字大小
fill: '#00ffff' //文字颜色
}
},
RollData: 9988998899 //要动画效果的数据
}
},
mounted () {
setTimeout(() => {
this.digitalConfig.number = [this.RollData]
this.$refs.digitalRef.update()
}, 300)
}
}
</script>
<style>
.datavCom {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #00020e;
}
</style>
如果还有不明白的地方，可以看官网（官网传送门：datav.jiaminghi.com/guide/digit…）
