element-ui el-upload组件,上传完成后隐藏上传按钮

项目开发中要求最多只能上传3张图片,最后一张图片上传完成后隐藏上传按钮,解决方法如下:

代码示例:


 

效果图如下:

1.动态绑定样式属性

:class="{uoloadSty:showBtnDealImg,disUoloadSty:noneBtnDealImg}"

data中定义

data(){
	return{
	  showBtnImg:true,
      noneBtnImg:false,
      limitCountImg:3   //上传图片的最大数量
	}
}

css样式


2.超过3张图片隐藏上传按钮,小于3张图片上传按钮显示

图片状态改变时触发,在on-change事件中判断图片数量

imgChange(file, fileList){
  this.noneBtnImg = fileList.length >= this.limitCountImg;
},

删除图片时触发,在on-remove事件中判断图片数量

handleImgRemove(file,fileList){
	this.noneBtnImg = fileList.length >= this.limitCountImg;
}

你可能感兴趣的:(vue)