实现一个基于Vue的数字翻牌滚动组件

数字翻牌组件在很多地方都有用到，比如倒计时、在线人数、销售量等等。这种组件可以封装一下，做成一个公用组件，这样在每次使用的时候就可以直接调用了。好了先看下效果。

动态效果

分析一下

首先分析一下，想这样的组件，需要动态配置的属性有哪些。数字肯定是动态传入，数字个数也肯定是动态传入，数字大小，数字颜色，以及此组件中的数字的背景也是动态传入。目前就先考虑这么多。那么这些属性肯定都必须在vue组件中的props进行声明。

实现

实现之前，我们还要先试着分解一下。这里我们的组件其实是由一个一个的数字组成，那么就可以组件进行拆分，最终的组件是由每一个数字组成即可，这样也可以方便的实现数字个数定制。而每个数字又分为上半部分，下半部分，和整体部分。为什么要这么分呢？主要是需要有翻页效果。首先一张底图，在翻页完成后正常的显示的就是这张底图，当需要翻页的时候，就把上半部分显示，然后进行旋转，旋转到中部的时候隐藏，然后显示下部分，下部分从中部开始旋转，旋转到底部的时候再隐藏，这样底图又显示了出来，视觉上就是翻页。而底图其实是上下两部分组成的。
那么接下来，我们开始试着实现一下这个组件。具体代码放在了gitee码云上。可移步查看