element-ui上传一张图片后隐藏上传按钮功能


Posted in Javascript onMay 22, 2019

element-ui上传一张图片后隐藏上传按钮

el-upload里面绑定一个占位class:

:class="{hide:hideUpload}"

data里面初始值:

hideUpload: false,

limitCount:1

onChange里面(添加文件、上传成功和上传失败时都会被调用的那个):

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

handleRemove里面(删除文件被调用的那个):

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

style,把scoped去掉(或者外部引入样式文件,主要目的是为了修改element-ui自带的样式)

<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>

PS:下面看下element-ui 上传图片时表单验证提示不消失

1.方法一:   表单元素上添加   v-model="list.length";

element-ui上传一张图片后隐藏上传按钮功能

2.添加一个ref ,之后在on-change 事件里清空表单验证  

element-ui上传一张图片后隐藏上传按钮功能

总结

以上所述是小编给大家介绍的element-ui上传一张图片后隐藏上传按钮功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
基于jquery的无刷新分页技术
Jun 11 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
javascript操作excel生成报表示例
May 08 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 #Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 #Javascript
JavaScript中的 new 命令
May 22 #Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 #Javascript
原生JS实现列表内容自动向上滚动效果
May 22 #Javascript
小程序如何使用分包加载的实现方法
May 22 #Javascript
原生js实现trigger方法示例代码
May 22 #Javascript
You might like
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
js中的闭包学习心得
2018/02/06 Javascript
vue实现拖拽效果
2019/12/23 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
网络书店创业计划书
2014/02/07 职场文书
失职检讨书大全
2015/01/26 职场文书
人与自然观后感
2015/06/16 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang