在项目中使用了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去掉!