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

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 8 个月前
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 8 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐