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 相关文章推荐
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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
PHP Cookie的使用教程详解
2013/06/03 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
js实现分页功能
2017/05/24 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
python 爬取疫情数据的源码
2020/02/09 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
优秀管理者事迹材料
2014/05/22 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
艺术节开幕词
2015/01/28 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
学生通报表扬范文
2015/05/04 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
Python中的datetime包与time包包和模块详情
2022/02/28 Python