.myProgressWrap{width:100%;显示：弹性；对齐项目：居中；.progressBar{flex:1;高度：6px；背景色：#f3f3f3；边界半径：6px；溢出-x：隐藏；.progressBarBg{高度：100%；边界半径：6px；//默认正常背景颜色：#1677ff；//添加一个transition，看宽度变化更自然transition:width0.36sease;位置：相对；}.progressBarBg::before{显示：var(--displayVal);内容：””;不透明度：0；位置：绝对；顶部：0；左：0；右：0；底部：0；背景：#fff；边界半径：10px；动画：东华2s无限；}.success{背景颜色：#52c41a;}.fail{背景色：#ff4d4f；}}.progressText{margin-left:6px;宽度：适合内容；//宽度自适应内容区域}}@keyframesdonghua{0%{op活力：0.5；宽度：0；}100%{不透明度：0;宽度：100%；}}本文记录了模仿一个el-progress组件的细节，帮助大家更好的理解饿了么UI对应组件的具体工作细节.本文是elementui源码学习模仿系列的另一篇文章，有空会持续更新模仿其他组件。源码在github上，大家可以拉下来，npmstart运行，结合注释帮助大家更好的理解。github仓库地址：https://github.com/shuirongsh...网站效果演示：http://ashhuai.work:8888/#/myP...组件分析组件渲染先来看组件渲染：这里的作者没有考虑垂直方向的进度条。读者可以复制代码修改。进度条组件一般分为三种，一种是水平进度条（最常用），另外两种是圆形进度条和仪表盘形进度条。这篇文章讲的是水平进度条的实现。值得一提的是，无论是饿了么、iview还是antd，三个进度条都集成到了一个组件中。为了让大家更容易理解，我在这里将进度条拆分得更详细：my-progress1横向进度条my-progress2圆形进度条&仪表盘进度条本文只讲横向进度条（my-progress1),其他两种进度条后面会提到。备注：如果觉得dashboard进度条不合适，也可以使用echarts中的dashboard。总之，实现中有很多组件结构。在封装一个组件之前，首先要考虑组件的dom结构，然后是组件接收到的props参数。一个水平进度条的dom结构分为：进度条容器，进度条文本内容区，最后包裹在一个大盒子里形成一个整体，如下图：对应html结构即:
