首页 > 其他分享 >el-upload点击问题

el-upload点击问题

时间:2024-09-09 18:47:03浏览次数:12  
标签:el 100% upload height 点击 组件

问题描述:
今天在写vue项目时,用到了element plus中的el-upload组件,发现这么一个问题:
组件各个功能都是正常的,也可以上传图片,但是
虚线框里那么大一片区域只有中间那个十字是可以点击的

点击查看代码
<el-upload
          class="ImageUpload"
          :action="
            'http://localhost:8888/information/uploadImage/' + this.ImageType
          "
          :show-file-list="false"
          :on-success="this.UploadImageSuccess()"
          :before-upload="beforeAvatarUpload"
        >
          <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
在查看官方文档后发现el-upload组件(我这里它的类名叫ImageUpload)里面还有一个el-upload类然后这个el-upload类里面再是Plus图标,其中el-upload才是真正可以点击的盒子,所以.el-upload类的大小就是Plus的大小,使用上就像是只有那个十字可以点击

解决方法:
知道问题怎么产生的后,解决就很简单了,即添加这么一段css样式

点击查看代码
#ModifyImagePopUpWindow .ImageUpload {
  min-height: 80px;
  width: 20%;
  height: auto;
}
#ModifyImagePopUpWindow .ImageUpload .el-upload {
  border: 1px dashed rgb(187, 92, 125);
  border-radius: 10px; /* 圆角 */
  width: 100%;
  height: 100%;
}

其中最重要的就是.el-upload中的“width: 100%;height: 100%;”这使他填充整个el-upload组件,就使得整个组件都可以对点击进行响应

标签:el,100%,upload,height,点击,组件
From: https://www.cnblogs.com/prawn/p/18405086

相关文章

  • 文件导出:Hutool 导出 Excel文件
     使用Hutool实现Excel数据导出。导出Excel文件为两个Sheet页。1.设备基本信息:包括设备编号、设备名称、设备位置等。2.设备维护记录:包括设备维护日期、维护人员、维护内容等。 1.Hutool简介Hutool是一个功能丰富的Java工具库,其中包含用于Excel文件处理的......
  • MySQL数据库insert,delete,update,select语句
    MySQL数据库insert,delete,update,select语句是在做数据处理是的重要部分首先我们要先拥有一个表格,这里我建立了一个student表然后在这个表格中添加一些数据这里要使用insert的语句INSERTINTOstudent(NO,NAME,age)VALUES(1001,'张三',20);这里我创建到的表有三个属性......
  • VBA高级应用30例应用3在Excel中的ListObject对象:循环列出当前工作表中的表
    《VBA高级应用30例》(版权10178985),是我推出的第十套教程,教程是专门针对高级学员在学习VBA过程中提高路途上的案例展开,这套教程案例与理论结合,紧贴“实战”,并做“战术总结”,以便大家能很好的应用。教程的目的是要求大家在实际工作中分发VBA程序,写好的程序可以升级。本套教程共三册三......
  • shell请求api,获取json返回值,做判断
    1.shell如何请求api,获取到json返回值:https://www.cnblogs.com/pingguomang/p/184050112.shell如果解析json数据: https://www.cnblogs.com/pingguomang/p/184049963.shell的条件判断:#定义用户的iduser_id="199348"#1.调用api--获取用户数据详细信息response=$(curl......
  • 2. 修改/编译kernel,luci登录
    1.修改kernel,在 openwrt/imx_openwrt/target/linux/imx/patches-5.15/目录下有一大堆补丁文件,就是用来给目标镜像打补丁的,在这里修改kernel补丁修改设备树补丁文件 0002-add-dts-files.patch+&pcie0{+pinctrl-names="default";+pinctrl-0=<&pinctrl_pcie......
  • crontab on raspberry pi, full path, not relative path, is needed.
    Sources: https://forums.raspberrypi.com/viewtopic.php?t=296993 thanksthagrol,thanksRaTTuS,youareright.Igetwrong.10****reboot->isnotrebootin10min.Itisnexthouratminute10reboot*/10****reboot->itisrebbotin10minB......
  • 《星球大战:亡命之徒》游戏启动时崩溃弹窗“缺少kernel32.dll”该怎么解决?星球大战亡命
    当《星球大战:亡命之徒》启动时崩溃弹窗提示“缺少kernel32.dll”,可以尝试重新安装游戏,看是否能恢复该文件。也可从可靠渠道下载kernel32.dll,放置到系统目录下,以解决问题让游戏正常启动。本篇将为大家带来《星球大战:亡命之徒》游戏启动时崩溃弹窗“缺少kernel32.dll”该怎么解决......
  • ElementUI 动态渲染 el-table
    动态生成列假设我们有一个columns数组,用于存储表格的列信息,每个元素包含列的prop和label:data(){return{tableData:[{date:'2016-05-03',name:'Tom',address:'No.189,GroveSt,LosAngeles'},{......
  • shell 请求http get api,获取返回值
    在Shell脚本中,你可以使用curl或wget来发送HTTPGET请求并获取返回值。以下是使用curl的示例:#!/bin/bash#APIURL无参数时:URL="http://example.com/api/data"#APIURL有参数时:id=119URL="http://example.com/api/data?id="+${id}#发送GET请求并存储响应response=$(cu......
  • mybaties-plus使用@SelectProvider实现动态SQL
    mybaties-plus使用@SelectProvider实现动态SQL新建DynamicSqlProvider.java类packagecom.muphy.mapper;importorg.apache.ibatis.jdbc.SQL;importjava.util.*;publicclassDynamicSqlProvider{publicStringbuildSelectSql(Map<String,Object>params){......