今天要来实现一个高可定制的进度条组件,在介绍组件设计之前,我们先牢记以下几个原则....上图可以知道封装后的进度条组件通过对外暴露的接口(react/vue里面可以看做props属性)可以很快的实现多个不同的表现和重用.我将会使用react带大家实现这个进度条组件, 大家不用担心技术栈不一样...基于react实现一个可定制的进度条组件
2.1....flex, css部分由于都比较简单,这里我只提一点就是.progressInnerBar的css,使用绝对定位, 因为这个部分未来可能会做动画,所以我们把它做成离屏dom, 因为它只做展示,它的宽度完全由...,也清晰的指引着我组件的最终实现.剩几个关键点如下:
设置进度区间
进度为100%时进度条自动消失
3. react组件细节和最终实现
react组件中,一个属性不一定要显性的赋值才能正常工作,比如上面代码中的