el-upload点击问题

问题描述：
今天在写vue项目时，用到了element plus中的el-upload组件，发现这么一个问题：
组件各个功能都是正常的，也可以上传图片，但是

虚线框里那么大一片区域只有中间那个十字是可以点击的
点击查看代码

1. <el-upload
2.          
3.           :action="
4.             'http://localhost:8888/information/uploadImage/' + this.ImageType
5.           "
6.           :show-file-list="false"
7.           :on-success="this.UploadImageSuccess()"
8.           :before-upload="beforeAvatarUpload"
9.         >
10.           <el-icon ><Plus /></el-icon>
11.         </el-upload>

复制代码

在查看官方文档后发现el-upload组件（我这里它的类名叫ImageUpload）里面还有一个el-upload类然后这个el-upload类里面再是Plus图标，其中el-upload才是真正可以点击的盒子，所以.el-upload类的大小就是Plus的大小，使用上就像是只有那个十字可以点击解决方法：
知道问题怎么产生的后，解决就很简单了，即添加这么一段css样式
点击查看代码

1. #ModifyImagePopUpWindow .ImageUpload {
2.   min-height: 80px;
3.   width: 20%;
4.   height: auto;
5. }
6. #ModifyImagePopUpWindow .ImageUpload .el-upload {
7.   border: 1px dashed rgb(187, 92, 125);
8.   border-radius: 10px; /* 圆角 */
9.   width: 100%;
10.   height: 100%;
11. }

复制代码

其中最重要的就是.el-upload中的“width: 100%;height: 100%;”这使他填充整个el-upload组件，就使得整个组件都可以对点击进行响应
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！