自适应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组件