Element-UI Uploader上传达到数量后隐藏上传按钮

在项目中使用到了 Element UI 的 Uploader 组件 . 需求是达到上传文件上限后 , 将组件的添加图片按钮隐藏.

首先给 el-upload 组件增加 class

1
2
3
<el-upload
:class="{hide:hideUpload}"
:on-change="handleImgChange">

然后 data 里面设定一个初始状态值

1
hideUpload: false

再在组件中绑定一个 on-change 事件 , handleImgChange

1
2
3
handleImgChange(file, fileList) {
this.hideUpload = this.vouchers.length >= this.limitCount;
}

css 部分

1
2
3
.hide .el-upload--picture-card {
display: none;
}

这样就可以实现上传按钮的显示隐藏了.

注意 , Vue 中需要将 style 中的 scoped去掉方可生效 , 或者增加层级前缀

1
2
3
/deep/ .hide .el-upload--picture-card {
display: none;
}

参考链接

CSDN:Element UI上传图片到达一定数量后隐藏图片上传按钮

0%