技术栈: 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,
// 在发生变化时改为true
this.hideUploadEdit = true;
2.放大功能
el-dialog嵌套会出现双遮罩问题,可以在内部dialog设置append-to-body
3.删除功能
// 删除图片
handleRemove() {
this.files.splice(0, 1);
// 隐藏上传
this.hideUploadEdit = false;
},