vue+elemnt ul 图片上传隐藏按钮+图片回显-CFANZ编程社区

技术栈： 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;
    },