element <el-upload> 上传图片后让上传框消失
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
原本是这样的
上传图片之后(就算你设置了最多只允许上传1张照片,右边这个上传框也不会消失)
而我们要的效果是上传之后,如下所示
实现方法:
<el-upload
:file-list="file_list"
:on-change="changeFile"
action="#"
ref="editEnc"
:class="{styleA:file_list.length === 0,styleB:file_list.length === 1}"
list-type="picture-card"
:auto-upload="false">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt="">
<span class="el-upload-list__item-actions" >
<span
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
其中核心代码为:
:class="{styleA:file_list.length === 0,styleB:file_list.length === 1}"
下面的js和css部分(注意style标签不能带有scoped)
data() {
return {
file_list:[],
}
},
.styleA .el-upload--picture-card{
width:110px;
height:110px;
line-height:110px;
}
.styleB .el-upload--picture-card{
display:none;
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献9条内容
所有评论(0)