技术栈: vue2.6 +element
需求:在弹窗中实现图片上传,上传之后隐藏上传按钮,实现放大和删除功能,修改时回显图片。
具体实现效果如图所示:
1.隐藏上传按钮
在el-upload中绑定一个动态的class变量(true 和false),默认为false,当文件列表发生变化时更改为true
<el-upload:headers="headers"action="xxx"list-type="picture-card":file-list="files"// 绑定 hide的class:class="{ hide: hideUploadEdit }" :on-error="handleError":on-success="handlesuccess":on-remove="handleRemove":on-preview="handlePictureCardPreview":before-upload="beforeAvatarUpload"><i slot="default" class="el-icon-plus"></i></el-upload>
// 设置class样式.hide .el-upload--picture-card {display: none;}
// 隐藏上传hideUploadEdit: false,// 在发生变化时改为truethis.hideUploadEdit = true;
2.放大功能
el-dialog嵌套会出现双遮罩问题,可以在内部dialog设置append-to-body
3.删除功能
// 删除图片handleRemove() {this.files.splice(0, 1); // 隐藏上传this.hideUploadEdit = false;},
4.回显
根据file-list参数绑定图片路径,从而实现回显
// 数据初始化files: [],// 数据回显,因为本次只有一个图片,所以采用了赋值,如果有多个可以采用push将多个数据放在放files中this.files = [{url: row.logoMin, largeUrl: row.logoLarge }];