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;">