el-upload點選問題

Ebbjik發表於2024-09-09

問題描述：
今天在寫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元件，就使得整個元件都可以對點選進行響應

相關文章