关于elementui上传图片隐藏上传按钮

做MIS端或者APP，上传图片，利用的是饿了么组件库里面的上传文件，为了用户体验度好一点当达到要求上传图片的上限时隐藏上传按钮，清除图片显示按钮效果图如下：

首先F12找到上传图片按钮的class名称为

接下来给上传图片的组件绑定一个class名

并且要给该组件添加on-change属性

在这里插入代码片
```<div class="upload"><el-uploadref="upLoad":class="{hide:hideUploadEdit}"action=""accept="image/*"multiplelist-type="picture-card":on-change="handleEditChange":http-request="uploadImg"><em slot="default" class="el-icon-plus" /><div slot="file" slot-scope="{file}"><imgclass="el-upload-list__item-thumbnail":src="file.url"alt=""@click="handlePictureCardPreview(file)"><spanclass="removeImg"@click="handleRemove(file)"><i class="el-icon-close" /></span></div></el-upload>

设置hideUploadEdit的初始值为false

找到饿了么组件on-change 事件，当上传的照片个数是达到规定的图片数量，hideUpload 变为true

// 图片数量大于五  变量为true 控制隐藏上传按钮handleEditChange(file, fileList) {this.hideUploadEdit = fileList.length >= 5console.log(' fileList.length: ', fileList.length)},

当照片要删除的时候

```xml
// 删除显示图片handleRemove(file) {let num = 0this.$refs.upLoad.uploadFiles.map(item => {if (item.uid === file.uid) {this.$refs.upLoad.uploadFiles.splice(num, 1)this.pollutionAddForm.fileList.splice(num, 1)this.fileCount--}num++})this.hideUploadEdit = false},


css代码 向上传组件组件添加一个名为hide的class名```css
// 隐藏上传按钮
::v-deep .hide .el-upload--picture-card {display: none;
}

关于elementui上传图片隐藏上传按钮相关推荐

Element UI 上传一张图片后隐藏上传按钮
el-upload里面绑定一个占位class: :class="{hide:hideUpload}" data里面初始化: hideUpload: false, limitCoun ...
element el-upload上传图片完成后隐藏上传
这里就直接上代码了,亲测可以. 这里只弄了上传一张照片后隐藏上传按钮,如需上传多张,自行修改limit属性即可. <template><el-card class="car ...
封装一个完整版的uniapp图片和视频上传组件，拿来即用，可进行图片视频切换，可自定义上传按钮样式，删除按钮样式，可单独上传图片或者视频，可限制上传数量
第一步 components里面新建一个manyImgUpload.vue组件,将以下代码放入以下代码中需要你改的地方 uni.uploadFile中的参数,url为你公司的上传接口.files为你 ...
JS任意截图并上传图片，上传视频、上传文件
** JS截图上传图片 ** 在前端WEB开放过程中,经常使用上传图片.上传视频.上传音频以及上传其他文件等,通常都使用到各种上传插件,但是很多插件只是单纯的上传文件,不具备图片截图,即使有也很传统, ...
css input[type=file] 样式美化，input上传按钮美化
思路: 原文出处:http://www.haorooms.com/post/css_input_uploadmh input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0, ...
jq定制上传按钮，选择文件就上传
使用css隐藏type="file" 的上传按钮,然后使用js调用 html代码 <input type="button" style="mar ...
CSS自定义文件上传按钮
原文:CSS自定义文件上传按钮今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: ...
layui图片上传按钮按着没反应_关于layui动态生成文件上传按钮后点击无效的解决办法...
首先,这是一个坑,大坑,网上一大堆写的云里雾里,不知所以,转了一圈,除了copy就是copy,Jesus God,花了一晚上,走通了这个坑,话不多说,直接解决 layui版本: layui-v2.5. ...
七牛HTML 上传按钮,七牛 JSSDK 配置＋常见问题
作者:娇娇jojo 时间:2018年6月19日一.铺垫依靠七牛上传图片,其实有很多方法,先说说有哪些方法,以及这些方法各自的优缺点吧(移动端). way1:前端只负责选择图片,然后将图片传给服务端 ...

关于elementui上传图片隐藏上传按钮

关于elementui上传图片隐藏上传按钮相关推荐

最新文章

热门文章

关于elementui上传图片 隐藏上传按钮

关于elementui上传图片 隐藏上传按钮相关推荐

最新文章

热门文章

关于elementui上传图片隐藏上传按钮

关于elementui上传图片隐藏上传按钮相关推荐