數字翻牌組件在很多地方都有用到，比如倒計時、在線人數、銷售量等等。這種組件可以封裝一下，做成一個公用組件，這樣在每次使用的時候就可以直接調用了。好了先看下效果。
分析一下
首先分析一下，想這樣的組件，需要動態配置的屬性有哪些。數字肯定是動態傳入，數字個數也肯定是動態傳入，數字大小，數字顏色，以及此組件中的數字的背景也是動態傳入。目前就先考慮這麼多。那麼這些屬性肯定都必須在vue組件中的props進行聲明。
實現
實現之前，我們還要先試着分解一下。這裏我們的組件其實是由一個一個的數字組成，那麼就可以組件進行拆分，最終的組件是由每一個數字組成即可，這樣也可以方便的實現數字個數定製。而每個數字又分爲上半部分，下半部分，和整體部分。爲什麼要這麼分呢？主要是需要有翻頁效果。首先一張底圖，在翻頁完成後正常的顯示的就是這張底圖，當需要翻頁的時候，就把上半部分顯示，然後進行旋轉，旋轉到中部的時候隱藏，然後顯示下部分，下部分從中部開始旋轉，旋轉到底部的時候再隱藏，這樣底圖又顯示了出來，視覺上就是翻頁。而底圖其實是上下兩部分組成的。
那麼接下來，我們開始試着實現一下這個組件。具體代碼放在了gitee碼雲上。可移步查看