之前给element-ui提了一个问题，结果没有鸟我，没办法，只能修改源码来满足需求了
(备注：element-ui2依然没有修改，为了迎合产品还是要改源码)
本文讨论的组件属性仅限于list-type='picture-card'
现在的问题是这样的：
element-ui中有一个upload组件，可以上传图片或文件。该组件有很丰富的钩子函数与配置，但是没有一个限制上传图片数量(即使是按钮禁用)的方法，于是我就自己封装了一下：
<el-upload :disabled='is_max' @s='...' @r='....' ...其余配置></el-upload>
export default = {
props:['num'], // 限制上传数量
methods:{
on-success:function(r,f,fl){
this.is_max = true;
if(this.num && this.num === fl.length){
this.is_max = false;
}
this.$emit('s',f,fl);
},
on-remove:function(f,fl){
this.is_max = false;
this.$emit('r',f);
},
on-progress:function(){
this.is_max = true;
}
}
}
封装添加了一个num参数，限制上传数量，并在上传过程中禁用上传按钮。
最初的目的是达到上传数量限制，就禁止上传，但是可以删除图片，删除后解除限制。
这个需求在1.3.7版本可以实现，但是在后面的某一次(可见我上一篇文章的结尾)commit中被修改了，删除与上传同时受disabled影响，如果设置disabled='true'，那么这个组件变成了一个纯展示作用，无法删除，无法添加。
后来决定暂时用1.3.7版本打包，先出功能。
原以为事情可以缓一缓，没想到产品对那个上传按钮十分不满，认为如果达到了上限，这个按钮会产生困惑，应该消失。禁用不行，里面弄个叉也不行，必须要消失！
好吧，只能来一发硬的，改源码。
上传按钮控制的标签如下所示，type为picture,text,picture-card之一。
<div class='el-upload el-upload--(type)'></div>
当时有两个想法：
1、修改disabled的默认行为，让上传按钮消失，删除按钮不作用
2、引入新的变量，单独控制上传按钮
由于不知道源码的内部行为，所以先想着。
一开始想法十分简单，找到了目录node_moduleselement-uipackagesuploadsrc下的upload.vue文件，为了看效果，直接添加了一行代码：
// line-163
const data = {
class: {
'el-upload': true,
'abc': true, // 这里是我自己加的
},
on: {
click: handleClick
}
};
保存-打包-打开网页-F12，发现并没有abc这个类被加上去，查看打包后的JS文件，依然只有一个el-upload类。
这就十分尴尬了，于是换了个地方，找到了node_moduleselement-uilib下的upload.js文件，添加了两行代码：
// line-934
var data = {
class: {
'el-upload': true,
'abc': true //同上
},
on: {
click: handleClick
}
};
// line-1312
var oClass = { 'el-upload': true, 'abc':true};
oClass['el-upload--' + listType] = true;
这里直接修改了打包后的render函数，我想着这次应该稳了，结果打包后一看，还是不行。
这就十分尴尬了，只能上网搜搜。一开始找到教程，教你修改哪个文件，然后实现功能，然而跟我之前的步骤一样，不可信。继续搜索，终于找到了一位小哥：https://segmentfault.com/a/1190000010932321
懒得看网页的可以找一个安静的文件夹，依次运行以下指令：
git clone https://github.com/ElemeFE/element.git
cd element
npm install
此时，element的元身会被下载下来。接下来修改package文件夹中的源码，运行npm run dist指令，该指令会在当前目录生成一个lib文件夹，用这个文件夹替换node_modules中的lib文件夹，然后打包就可以了！
事不宜迟，试试！
找到了elementpackagesuploadsrc下的upload.vue，再次进行修改：
class: {
'el-upload': true,
'abc':true,
},
又是熟悉的操作，然而报了2个error，一脸懵逼的看错误信息：
1、Missing space before value for key 'abc'
2、Unexpected trailing comma
凭着我过硬的英文功底修正了错误：
1、冒号后面要加空格
2、最后一个属性的逗号要省略
修改后再次运行，眼前闪过一片花花绿绿，成了。
覆盖了lib文件夹后再次尝试，可以惊喜的看到：
<div class='el-upload abc el-upload--picture-card'></div>
感觉人生都阳光起来了,接下来是实现目标的时候了。
简略的看了下upload组件内部，有包含5个组件index、iframe-upload、upload-dragger、upload-list、upload。
其中iframe-table是造一个表单，然后表单提交图片信息，略过。
upload-dragger是拖拽功能，略过。
upload-list实现已图片上传预览，略过。
需要关注的只有整合所有组件的index与上传按钮相关的upload组件了。
index.vue的整个大概是这样：
<div>
<upload-list></upload-list> <!-- 用于展示图片 仅当picture-card类型时在前面 -->
<uploadComponent> <!-- 上传 内部的DOM会被当成上传按钮 通过FormDataAPI决定调用表单或者ajax -->
<upload></upload> <!-- drag属性决定是否支持拖拽 -->
</uploadComponent>
</div>
仔细看了一遍内部实现，再回头看一眼之前的2个想法，决定用第二个，修改默认有点麻烦。
方式比较简单粗暴，在所有定义diabled的地方加上了一条新语句，比如：
// line-94
{
disabled: Boolean
Jimmy_input_btn_disabled: Boolean
}
这样就自定义了一个新的数据，第二步，通过这个来阻止上传按钮生成。
找来找去，只有一个地方可以控制：
// line-254
// 这里是上传按钮的渲染点
const uploadComponent =
this.Jimmy_input_btn_disabled ? '' : // 我加的
(typeof FormData !== 'undefined' || this.$isServer)
? <upload {...uploadData}>{trigger}</upload>
: <iframeUpload {...uploadData}>{trigger}</iframeUpload>;
加上后，打包测试：
<el-upload :Jimmy_input_btn_disabled='is_max' ...其余配置></el-upload>
在图片达到上限后，上传按钮惊喜的消失了，舒服！
然而，在下一秒，我删除图片的时候，就报了一个错，abort无法执行。
顺着报错信息，找到了这里：
// 删除时候会调用的函数
handleRemove(file, raw) {
if (raw) {
file = this.getFile(raw);
}
this.abort(file);
// ...
},
//...
abort(file) {
this.$refs['upload-inner'].abort(file);
},
这个upload-inner呢，在index.vue也有定义：
const uploadData = {
props: {
// ...一堆参数
},
ref: 'upload-inner'
};
再看看上面uploadComponent的定义，我瞬间明白了，这个ref被作为参数传给了上传按钮，删除图片需要执行绑定在该按钮上面的abort函数。问题是，这个按钮被我弄没了，而且由于vue的'析构'，DOM上的事件也没了。
结果就是，不可行，粗暴是不对的，两个方案同时否决。
想了好久，既然不能让DOM消失，那么弄成display:none不就OK了么。
两个方案：
1、根据某个条件动态渲染一个自定义的class，该class定义为diaplay:none
2、根据某个条件动态渲染行内样式display:none
由于render函数不太记得用法，所以第二个看起来实现有点难度，决定用第一个。当然，这个条件不能是默认的diabled，所以，我的Jimmy_input_btn_disabled又可以出场了。
修改的时候遇到了瓶颈，里面的代码居然是JSX，我修改了upload.vue：
class: {
'el-upload': true,
'abc' : !!this.Jimmy_input_btn_disabled
},
很明显，虽然数据传进来了，但是并没有做到动态渲染，这里只是初始化，所以abc没有出现过，并且在变动的时候，根元素出现了这样的情况：
<div Jimmy_input_btn_disabled = 'true'></div>
当时真是笑尿我了。
一度陷入了僵局，JSX不知道怎么写。如果是vue中的render函数，我还可以写个demo然后模仿。
最后我甚至跑去看react的教程，但是人家变动数据用的是setState……
在不断的尝试中的，我是找到了办法，简单的吐血。
其实早就发现了，只是陷入了一个误区。
首先这个Jimmy_input_btn_disabled需要更改为String类型，作为一个动态类传入：
disabled: Boolean,
Jimmy_inputbtn_disabled: String
第二步，在JSX中直接写class：
<div {...data} class={Jimmy_input_btn_disabled}>
...
</div>
源码修改完成，打包。
html中如下：
<div :Jimmy_input_btn_disabled = 'xxx'></div>
JS文件如下：
new Vue({
data:{
xxx:''
},
methods:{
s:function(){
// 达到上限
this.xxx = 'xxx';
},
r:function(){
// 解除
this.xxx = '';
}
}
});
CSS很简单，直接设置xxx{display:none}就行了。
最后测试结果十分成功！