100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue+elemnt ul 图片上传隐藏按钮+图片回显

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

时间:2022-02-02 12:20:23

相关推荐

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

技术栈: 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 }];

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。