elementui源码学习之仿写一个el-progress（横向进度条）

本篇文章记录仿写一个el-progress组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节。本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件。源码在github上，大家可以拉下来，npm start运行跑起来，结合注释有助于更好的理解。

GitHub仓库地址：https://github.com/shuirongsh...

网站效果演示：http://ashuai.work:8888/#/myP...

组件分析

组件效果图

我们先看下组件效果图：

这里笔者没有考虑垂直方向的进度条，读者们将代码拷贝下来进行改造哦，动动手多敲敲

组件介绍

进度条组件一般分为三种，一种是横向进度条（最为常用）、另两种是圆形进度条和仪表盘形进度条，本文说一下横向进度条的实现方式，值得一提的是无论是饿了么还是iview还是antd是吧三种进度条融合在一个组件中去的。

为了便于大家更好理解，我这里把进度条进行更为细致的拆分：

• my-progress1 横向进度条
• my-progress2 圆形进度条&仪表盘进度条

本文单说横向进度条（my-progress1），后文会说另外两种进度条

备注：若大家感觉仪表盘进度条不太适合，也可使用echarts中的仪表盘，总之实现方案有多种

组件结构

在封装一个组件之前，我们首先要考虑组件的dom结构，然后才是组件接收的props参数，一个横向进度条的dom结构分为：

1. 进度条容器
2. 进度条
3. 文字内容区
4. 最后再用一个大盒子包着形成一个整体即可

如下图：

对应html结构就是：

    
    

      
      

    
    
    

      {{ percentage }}%
      
    

组件的功能

• 预设几种默认样式进度条颜色 status参数
• 百分比从0到100 percentage参数
• 可自定义设置进度条的颜色 字符串color参数
• 可让进度条在不同数值下显示不同颜色 函数color参数

新知识点css中通过var函数使用js中的变量

关于进度条组件没有太多新的知识点，都是笔者曾经封装组件提到过的，不过这里有一个新的知识点

什么是css中的var函数

关于css中的var函数，这里不赘述，忘记知识点的同学，可以看下官方文档：

https://developer.mozilla.org...

这里简述一下使用var函数的步骤

第一步 html标签中使用:style绑定

第二步 在data或者props或者computed中要定义的有值

data() {
    return {
      displayVal: "none", // css中使用js中变量的具体值
    };
  },

第三步 css中使用var函数读取使用

  .progressBarBg::before {
      display: var(--displayVal); 
      // 相当于：display: none
      content: "";
      ...
    }

• 为什么需要提到要在css中使用js中的变量数据呢？因为进度条有一个动画效果，当外界传进来showDongHua变量为true时，需要展示这个动画，为false时就不要这个动画。
• 这里就是js中的一个变量去控制css中的具体值
• 换句话说，就是css通过使用js中的变量数据，去操作动画是否显示
• 即：css中使用js中的变量

代码详情

这里大家复制粘贴，结合注释进行调试，就能够理解了

笔者就不啰嗦啦

使用时的代码

封装组件的代码

总结

• A bad pen is better than a good memory
• 完整代码在github上哦，也可以直接访问网址看效果（还有其他笔者封装的组件）