vue 點擊圖標實現上傳文件效果（icon+input）

方法一：短小精干，不用設置css;（推薦使用）

<label for="fileInput">
  <i class="iconfont icon-photo" aria-hidden="true"></i>
</label>
<input v-show="false" type="file" id="fileInput">

 

方法二、相對定位、絕對定位、overflow配合opacity實現

<span class="fileinput-button ">
   <i class="iconfont icon-photo" aria-hidden="true"></i>
   <input type="file" multiple>
 </span>

.fileinput-button {
 position: relative;
 display: inline-block;
 overflow: hidden;
}
.fileinput-button input {
 position: absolute;
 right: 0px;
 top: 0px;
 opacity: 0;
}

方法3：label+input，input設置為透明，但是透明了還是會占用空間，需要加一個父標簽並設置寬度，超過並隱藏。

<label for="fileInput">
  <i class="iconfont icon-photo" aria-hidden="true"></i>
</label>
<input v-show="false" type="file" id="fileInput" style=" opacity: 0;">