自適應process組件

好久沒有寫博客了，自從工做忙了就忘了學習新東西，真是越大越懶。

作項目中，須要一個process流程的UI組件，翻遍公司組件和業界框架，都沒有知足自適應要求的現成的process組件，只能本身實現。實現的過程當中，發現有兩個有意思的地方，特此分享出來。

首先看看最後須要的效果： 點我查看demo。

實現

流程組件中，兩個hr構成圓點之間的鏈接線。

圓點用span 經過 border-raduis: 50%實現。

接下來，第一個難點來了，如何實現 居中 而且 自適應。

自適應的意思是，拉伸瀏覽器的時候，流程組件也跟着變化長度，而且不變型。那麼，咱們天然的想到了用百分數設置寬度。

第一張方案：

用 outer 居中， inner平份內部，即每一個inner佔用 1/7 = 14.2%。內部原點span和文字經過每一個inner的text-align:center;居中。

接下來就鏈接線hr的寬度的計算就成了問題。好比鏈接線hr的起始位置怎麼計算？inner的1/2，也就是1/14=0.071？

第一次inner的1/7就有省略小數點的偏差，再一半確定更有偏差，hr的寬度會再乘以2，乘以3，偏差會更大，頗有可能出現下面的狀況:

第二種方案：

要解決節點span長度計算的問題，就必須讓其乘以的倍數是精確可計算的。因而：

經過外層outer實現居中，inner＋左側等寬的空白 平份內部寬度，即 1/8=12.5%。

這裏又來了另外一個問題：如何使下方文字左移自身寬度一半？

父元素設置 text-align: center; ？？ 不行，咱們的圓點span只能從最左邊開始。

自身position: absolute; left: 50%; margin-left: -寬度？不行，自身寬度不知道，變化的。

position: relative; left: -50%？不行，left 百分比是以最近已定位父元素的寬度爲參照。

最後解決辦法是，增長一層父元素，使父元素寬度爲自身寬度。這樣left百分比就能夠至關於以自身寬度。

最後的效果：

02.06更新

因爲是跨部門合做，對方返回的流程狀態老是在變，從7個變到5個，從5個變到6個。

7個狀態有8個span，這樣 1/8 = 12.5

5個是加3個變8，也是12.5。經過margin-left微調。

6個同理，加2變8，經過margin-left微調。

07.24 更新

升級組件，能夠適應後端的數據5-7個。

github地址: https://github.com/freestyle21/step

原創文章，歡迎轉載。轉載請註明：轉載自Fs21 ' s Home，謝謝！
原文連接地址：自適應process組件