自适应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百分比就可以相当于以自身宽度。

最后的效果：

由于是跨部门合作，对方返回的流程状态总是在变，从7个变到5个，从5个变到6个。

7个状态有8个span，这样 1/8 = 12.5

5个是加3个变8，也是12.5。通过margin-left微调。

6个同理，加2变8，通过margin-left微调。

升级组件，可以适应后端的数据5-7个。

原创文章，欢迎转载。转载请注明：转载自Fs21 ' s Home，谢谢！
原文链接地址：自适应process组件