项目开发中要求最多只能上传3张图片,最后一张图片上传完成后隐藏上传按钮,解决方法如下:
代码示例:
<el-upload
:class="{uoloadSty:showBtnDealImg,disUoloadSty:noneBtnImg}"
:action="dealImgUrl"
list-type="picture-card"
:on-preview="handleDealImgPreview"
:on-remove="handleDealImgRemove"
:on-success="successDealImg"
:before-upload="beforeUploadDealImg"
:on-change="dealImgChange"
:file-list="dealImgFileList"
accept=".jpeg,.jpg,.gif,.png"
:limit="limitCountImg"
>
<i class="el-icon-plus"></i>
</el-upload>
效果图如下:
1.动态绑定样式属性
:class="{uoloadSty:showBtnDealImg,disUoloadSty:noneBtnImg}"
data中定义
data(){
return{
showBtnDealImg:true,
noneBtnImg:false,
limitCountImg:3 //上传图片的最大数量
}
}
css样式
<style>
.uoloadSty .el-upload--picture-card{
width:110px;
height:110px;
line-height:110px;
}
.disUoloadSty .el-upload--picture-card{
display:none; /* 上传按钮隐藏 */
}
</style>
2.超过3张图片隐藏上传按钮,小于3张图片上传按钮显示
图片状态改变时触发,在on-change事件中判断图片数量
dealImgChange(file, fileList){
this.noneBtnImg = fileList.length >= this.limitCountImg;
},
删除图片时触发,在on-remove事件中判断图片数量
handleDealImgRemove(file,fileList){
this.noneBtnImg = fileList.length >= this.limitCountImg;
}