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 相关文章推荐
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
用jquery仿做发微博功能示例
2014/04/18 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
python函数局部变量用法实例分析
2015/08/04 Python
使用Python写一个小游戏
2018/04/02 Python
Python全排列操作实例分析
2018/07/24 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
年度献血先进个人事迹材料
2014/02/14 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
服务宗旨标语
2014/07/01 职场文书
关于军训的感想
2015/08/07 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python