为什么要修改源码?不到万不得已不会走这一步。需求是这样的:实现如下图的样式,但是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.增加自定义样式,我使用了自己的主题,直接在里面修改,就成了全局的了
如果有什么好的建议或方法,欢迎评论!