0
点赞
收藏
分享

微信扫一扫

vue+elemnt ul 图片上传隐藏按钮+图片回显

Gascognya 2022-04-16 阅读 53

技术栈: 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;
    },
举报

相关推荐

0 条评论