在項(xiàng)目中使用了element的el-upload上傳圖片組件端辱，需求是上傳一張圖片而已蛋铆，但是發(fā)現(xiàn)上傳完以后一張圖片后在旁邊會(huì)自己再生成一個(gè)上傳圖片的按鈕
原來(lái)的效果是這樣的：
但需求是上傳之后沒(méi)有這個(gè)上傳按鈕趟佃，刪除圖片之后再出現(xiàn)先巴。
1.通過(guò)瀏覽器找到了這個(gè)上傳圖片按鈕的class名稱為 .el-upload–picture-card 我知道不可以直接修改亿絮，所以決定給這個(gè)組件綁定一個(gè)class名
組件寫(xiě)法：
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:limit="2"
:on-success="handleSuccess"
:on-change="handleFileChange"
:on-remove="handleRemove"
:class="{hideAdd:uploadDisabled}">
<i class="el-icon-plus"></i>
</el-upload>
css代碼：
.hideAdd {
/deep/ .el-upload--picture-card {
display: none;
}
}
2.data里面設(shè)定兩個(gè)初始的狀態(tài)值
// 控制是否顯示圖片上傳+號(hào)
uploadDisabled: false,
// 允許上傳圖片的數(shù)量
limitImgNumber: 1,
3.在el-upload中綁定一個(gè)on-change事件仍律，這個(gè)事件有兩個(gè)參數(shù)（file拘悦，fileList）并且在添加文件诈豌、上傳成功和上傳失敗時(shí)都會(huì)被調(diào)用（但是注意刪除文件不會(huì)被調(diào)用壶谒。云矫。。）：
// 文件上傳變化
handleFileChange(file, fileList) {
//是否展示圖片+號(hào)
this.uploadDisabled = fileList.length >= this.limitImgNumber;
},
4.由于on-change事件汗菜，在文件移除時(shí)不會(huì)被觸發(fā)让禀，因此我們?cè)趏n-remove文件移除事件中去手動(dòng)觸發(fā)on-change事件
// 文件移除事件
handleRemove(file, fileList) {
//手動(dòng)觸發(fā)change事件
this.handleFileChange(file, fileList);
},
完成！效果圖：
