隐藏 element-ui上传照片显示的加号盒子

最新推荐文章于 2023-02-09 17:09:53 发布

终是后来居上

最新推荐文章于 2023-02-09 17:09:53 发布

阅读量2.7k

点赞数

文章标签：隐藏 element-ui上传照片显示的加号盒子

本文链接：https://blog.csdn.net/weixin_43953710/article/details/87882140

版权

我的bug路同时被 2 个专栏收录

87 篇文章 2 订阅

订阅专栏

vue项目常见问题

37 篇文章 1 订阅

订阅专栏

满足条件激活样式
在这里插入图片描述

在这里插入图片描述

.disabled .el-upload–picture-card {
display: none;
}
让+ 这个大盒子隐藏
在这里插入图片描述

在这里插入图片描述

上传成功的钩子

在这里插入图片描述

上传成功时把上传的图片加入一个数组
激活隐藏加号盒子的样式

在这里插入图片描述
移除时的钩子

当上传的照片个数未达到上限时不激活隐藏的样式

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

终是后来居上

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

-CSS-笔记-

April_Aimer的博客

02-07

2174

目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程从HTML被发明开...

2021-6月面试总结-vue，uniapp，小程序，h5，更新中

m0_67266787的博客

02-24

764

**一、**vue 2.6.11 vue****页面的生命周期？总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre

1 条评论您还未登录，请先登录后发表或查看评论

Element-ui上传图片完成后隐藏加号

qq_41555695的博客

06-24

5485

看了一圈始终没找到合适的方法，又回去仔细看了一下官网发现非常简单。。。终于解决了，记录一下。 on-change方法监听文件状态，对文件状态作出判断，如果大于3张图片就隐藏加号。代码如下： <el-upload action="api/upload/upload" list-type="picture-card" :on-preview="handlePrevi...

Element-ui上传一张图片完成后隐藏加号

code

09-12

1732

<el-upload :action="https://www.upload.baidu.com" list-type="picture-card" :class="{ disabled: uploadDisabled }" :limit="1" :on-success="handleAvatarSuccess" :on-change="handleChange" :on-remove=".

el-upload 限制上传数量，然后隐藏加号

xyh1993的博客

01-11

1608

el-upload 限制上传数量，然后隐藏加号

el-upload上传组件 - 仅上传一个图片，且上传后隐藏选择的+号

weixin_45609659的博客

12-15

4503

<template> <el-form ref="myFormRef" :model="myForm" label-width="100px" size="medium" > <el-upload :class="{hide:hideUpload}" //绑定class action="#" //必选参数，上传的地址 .

el-upload上传组件 - 仅上传一个文件或图片，且隐藏掉选择文件框（或+号）

u012891980的博客

02-15

2万+

如上图所示，需要解决的问题就如图所示：解决方案： 1. 定位需要隐藏的虚框element； 2. 设置虚框的style。具体代码：（vue.js实现方案） 1. /////隐藏定位的目标element let upload_div = $('.avatar-uploader-cover')[0].childNodes[0]; // this.removeClassName...

vue3后台管理系统

weixin_52872150的博客

11-05

3571

vue3后台管理系统

一看就会；vue实现图片上传回显及修改（element-ui限制一张图片上传，没有图片显示+号，有图片显示图片隐藏+号）

sunwenpinglike的博客

02-09

3428

vue中实现图片上传回显及修改（element-ui限制一张图片上传，没有图片显示+号，有图片显示图片隐藏+号）

Vue+Element UI Upload 组件上传单张图片去除后面的+号

超级小东的博客

12-03

5521

这个思路是隐藏 el-upload–picture-card” 我是在钩子函数上传中、上传成功、上传失败、预览这些地方进行控制。这样在上传中那个"+"号也可以马上隐藏上传组件代码块 <el-form-item label="产品图片:" size="mini"> <el-upload action="上传接口" :limit="1" :on-pr...

使用element上传图片显示后端传过来的

weixin_459417989的博客

12-10

1635

通过后端获取数据直接赋值给file-list <el-upload action="#" **:file-list="fileList"** list-type="picture-card" :auto-upload="false"> <i slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{file}"> <img

element-ui table中的图片的显示解决方案

热门推荐

DianaGreen7的博客

07-23

5万+

如何像图中显示出图片信息以下是解决方案： &amp;lt;!--列表--&amp;gt; &amp;lt;el-table :data=&quot;homes&quot; highlight-current-row v-loading=&quot;listLoading&quot; @selection-change=&quot;se

this.$refs.element.style.display = 'none', ts提示类型报错问题

weixin_33743703的博客

02-14

3211

上代码问题原因没有声明this.$refs.detailWrapper的类型, 所以ts会出现错误解决方法: 如下图

类型“Element”上不存在属性“style”

小妖666个人笔记

09-27

2万+

因为ts默认用的是Element，需要声明为HTMLElement let top = <HTMLImageElement>document.querySelector('.Top'); top.style.display = 'none' ; 或是下面这样 let top = document.querySelector('.Top') as HTMLElement; t...

基于vue和elmentUi和SpringMvc从后台数据库中返回图片到前端显示

小jinx的博客

02-17

2863

接上一篇文章，将图片从数据库返回到前端显示

element-ui 通过v-show去显示和隐藏tabs的pane

u013379933的博客

08-12

2万+

通过v-if去控制tabs的pane显示和隐藏，会赞成数据无法保留，因为v-if会销毁组件，再重新创建。我这里是通过设置选项卡的显示和隐藏（控制display）来做到的 // watch监听 watch: { 'ruleForm.isbrand' : { // 监听ruleForm的isbrand(是否品牌)被选中了 handler (newVal, oldV...

Element-UI 上传图片到达一定数量后隐藏图片上传按钮

尘生杜若

05-09

1万+

在项目中使用了element的el-upload上传图片组件，需求是上传一张图片而已，但是发现上传完以后一张图片后在旁边再生成一个上传图片的按钮就像这样，实在是接受不了，并且需求是上传之后没有这个上传按钮，删除图片之后再出现。首先我通过浏览器找到了这个上传图片按钮的class名称为 .el-upload–picture-card 我知道不可以直接修改，所以决定给这个组件绑定一个class名 ...

element-ui图标不显示