100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Element-UI 上传图片到达一定数量后隐藏图片上传按钮

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

时间:2022-07-28 12:50:41

相关推荐

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

在项目中使用了element的el-upload上传图片组件,需求是上传一张图片而已,但是发现上传完以后一张图片后在旁边再生成一个上传图片的按钮

就像这样,实在是接受不了,并且需求是上传之后没有这个上传按钮,删除图片之后再出现。

首先我通过浏览器找到了这个上传图片按钮的class名称为 .el-upload–picture-card 我知道不可以直接修改,所以决定给这个组件绑定一个class名

:class="{hide:hideUpload}"

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

hideUpload: false

在el-upload中绑定一个on-change事件,这个事件有两个参数(file,fileList)并且在添加文件、上传成功和上传失败时都会被调用:

this.hideUpload = fileList.length >= this.limitCount;

当上传图片的数量大于或等于你所限制的上传图片数量时(也就是组件中绑定的limit),hideUpload 为true则像组件添加一个名为hide的class名

在el-upload中绑定一个on-remove事件,这个事件在删除图片时调用

this.hideUpload = fileList.length >= this.limitCount;

同样的一行代码,不过这时hideUpload为false

css代码

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

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

注意:在vue中的话,需要将style中的scope去掉!

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