數(shù)字翻牌組件在很多地方都有用到，比如倒計時、在線人數(shù)、銷售量等等。這種組件可以封裝一下，做成一個公用組件，這樣在每次使用的時候就可以直接調(diào)用了。好了先看下效果。

動態(tài)效果

分析一下

首先分析一下，想這樣的組件，需要動態(tài)配置的屬性有哪些。數(shù)字肯定是動態(tài)傳入，數(shù)字個數(shù)也肯定是動態(tài)傳入，數(shù)字大小，數(shù)字顏色，以及此組件中的數(shù)字的背景也是動態(tài)傳入。目前就先考慮這么多。那么這些屬性肯定都必須在vue組件中的props進行聲明。

實現(xiàn)

實現(xiàn)之前，我們還要先試著分解一下。這里我們的組件其實是由一個一個的數(shù)字組成，那么就可以組件進行拆分，最終的組件是由每一個數(shù)字組成即可，這樣也可以方便的實現(xiàn)數(shù)字個數(shù)定制。而每個數(shù)字又分為上半部分，下半部分，和整體部分。為什么要這么分呢？主要是需要有翻頁效果。首先一張底圖，在翻頁完成后正常的顯示的就是這張底圖，當需要翻頁的時候，就把上半部分顯示，然后進行旋轉(zhuǎn)，旋轉(zhuǎn)到中部的時候隱藏，然后顯示下部分，下部分從中部開始旋轉(zhuǎn)，旋轉(zhuǎn)到底部的時候再隱藏，這樣底圖又顯示了出來，視覺上就是翻頁。而底圖其實是上下兩部分組成的。
那么接下來，我們開始試著實現(xiàn)一下這個組件。具體代碼放在了gitee碼云上?？梢撇讲榭?/p>