自己编写:https://blog.csdn.net/weixin_42418774/article/details/107064255

element-ui upload 照片墙回显指定图片,隐藏上传按钮和显示上传按钮,选择图片与提交上传分开(先选择好了,点击确定再上传)

 

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

代码示例:

<el-upload
 :class="{uoloadSty:showBtnImg,disUoloadSty:noneBtnImg}"  //设置隐藏显示的style
 :action="dealImgUrl"  //地址
 list-type="picture-card"
 :on-preview="handleImgPreview"  //点击图片放大
 :on-remove="handleImgRemove"    //移除
 :on-success="successImg"      //上传成功
 :before-upload="beforeUploadImg"   
 :on-change="imgChange"   
 :file-list="dealImgFileList"
 accept=".jpeg,.jpg,.gif,.png"
 :limit="3"   //限制个数
>
 <i class="el-icon-plus"></i>
</el-upload>

效果图如下:
在这里插入图片描述

1.动态绑定样式属性

:class="{uoloadSty:showBtnImg,disUoloadSty:noneBtnImg}"
定义变量
data(){
	return{
        showBtnImg:true,
          noneBtnImg:false,
          limitCountImg:3   //上传图片的最大数量
	}
}
style样式
<style>
.uoloadSty .el-upload--picture-card{
  width:110px;
  height:110px;
  line-height:110px;
}
.disUoloadSty .el-upload--picture-card{
  display:none;   /* 上传按钮隐藏 */
}
</style>

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

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

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

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

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐