element-ui上传一张图片后隐藏上传按钮功能
2019-05-22 18:03
6109 查看
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";
2.添加一个ref ,之后在on-change 事件里清空表单验证
总结
以上所述是小编给大家介绍的element-ui上传一张图片后隐藏上传按钮功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣的文章:
相关文章推荐
- elementUI+koa实现图片上传功能
- elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
- elementUI图片上传之前对图片的宽高做限制。
- element-ui 上传图片后清空图片显示的实例
- 隐藏 element-ui上传照片显示的加号盒子
- vue+elementUi做的图片上传组件
- Android仿微信图片上传带加号且超过最大数隐藏功能
- Element UI Upload 组件 设置只允许上传单张图片的操作
- 怎么简便地去掉html中难看的文件上传按钮并实现图片预览功能?
- Upload 上传 以及图片不显示问题 element-ui
- 黄聪:如何在wordpress任何一个页面调用“插入图片”按钮,实现上传图片功能
- kindeditor 隐藏网络图片功能,只保留本地上传功能,并且将图片进行压缩处理
- 怎样隐藏uploadify上传控件的按钮,然后通过其它控件的事项来触发uploadify控件的文件浏览窗口并现实文件上传功能
- 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制
- 多图片实现上一张,下一张按钮功能DEMO
- element-ui时表单提交携带图片效验功能的概述
- 如何在wordpress任何一个页面调用“插入图片”按钮,实现上传图片功能
- vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
- 黄聪:如何在wordpress任何一个页面调用“插入图片”按钮,实现上传图片功能
- kindeditor 隐藏网络图片功能,只保留本地上传功能,并且将图片进行压缩处理