element-ui el-upload组件,上传完成后隐藏上传按钮,删除后又显示
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
自己编写:https://blog.csdn.net/weixin_42418774/article/details/107064255
element-ui upload 照片墙回显指定图片,隐藏上传按钮和显示上传按钮,选择图片与提交上传分开(先选择好了,点击确定再上传)
项目开发中要求最多只能上传3张图片,最后一张图片上传完成后隐藏上传按钮,解决方法如下:
代码示例:
<el-upload
:class="{uoloadSty:showBtnImg,disUoloadSty:noneBtnImg}" //设置隐藏显示的style
:action="dealImgUrl" //地址
list-type="picture-card"
:on-preview="handleImgPreview" //点击图片放大
:on-remove="handleImgRemove" //移除
:on-success="successImg" //上传成功
:before-upload="beforeUploadImg"
:on-change="imgChange"
:file-list="dealImgFileList"
accept=".jpeg,.jpg,.gif,.png"
:limit="3" //限制个数
>
<i class="el-icon-plus"></i>
</el-upload>
效果图如下:
1.动态绑定样式属性
:class="{uoloadSty:showBtnImg,disUoloadSty:noneBtnImg}"
定义变量
data(){
return{
showBtnImg:true,
noneBtnImg:false,
limitCountImg:3 //上传图片的最大数量
}
}
style样式
<style>
.uoloadSty .el-upload--picture-card{
width:110px;
height:110px;
line-height:110px;
}
.disUoloadSty .el-upload--picture-card{
display:none; /* 上传按钮隐藏 */
}
</style>
2.超过3张图片隐藏上传按钮,小于3张图片上传按钮显示
imgChange(file, fileList){
this.noneBtnImg = fileList.length >= this.limitCountImg;
},
删除图片时触发,在on-remove事件中判断图片数量
handleImgRemove(file,fileList){
this.noneBtnImg = fileList.length >= this.limitCountImg;
}
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 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)