记录一次ElementUI修改Slider源码的经历

        为什么要修改源码？不到万不得已不会走这一步。需求是这样的：实现如下图的样式，但是ElementUI官网上的slider滑块html标签太少了，如下图

为了满足需求，需要单独设置左边的轨道和圆圈的颜色，但是“el-slider__runway”和“el-slider__button”无法设置一个，只能2个同时一起改变。为了解决这个问题，有2个思路，第一个是通过css单独改变颜色，用.el-slider__bar:before设置样式；第二个是在el-slider__runway下面再增加一个div,并且在button 后面再加一个class，对2个圆圈进行区分。由于圆圈会滑动，所以，如果单独通过css改变颜色，需要动态的改变宽度，这个涉及到css变量问题，比较复杂，所以放弃了这种方案。采用第二种，修改源码+修改样式的方式，虽然修改源码会为后续维护带来不便，但先实现功能再后续优化。

下面讲解如何修改源码：

1.https://github.com/ElemeFE/element下载或clone源码

2.在文件夹下npm install

3.找到pakages\slider\src修改main.vue里面的内容（注意：用vscode编辑比较好，因为格式要遵循eslint，特别是空格，容易报错），增加标签及class

4.执行npm run dist 生成lib文件夹

5.将生成的lib文件夹整个替换你的项目node_modules下element-ui下的lib文件夹（注意：要全部替换），不能单独替换某一个文件，那样替换了无效

6.增加自定义样式，我使用了自己的主题，直接在里面修改，就成了全局的了

    

如果有什么好的建议或方法，欢迎评论！