vue 点击图标实现上传文件效果

查了好多网友的文章，有两种方法

• 第一种是用相对定位、绝对位、overflow 配合opacity 实现

  <span class="fileinput-button ">
  <i class="fa fa-folder-open-o" aria-hidden="true"></i>
  <input type="file" multiple>
  </span>

  css

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

• 第二种是用label，再把input 设为透明;透明了还是会占用空间 需要加个父标签，设置宽度，超过再隐藏

  <label for="fileInput">
  <i class="fa fa-folder-open-o" aria-hidden="true"></i>
  </label>
  <input v-show="false" type="file" id="fileInput" style=" opacity: 0;">

• 第三种方法： 短小精干 我喜欢 不用设置css;

  <label for="fileInput">
  <i class="fa fa-folder-open-o" aria-hidden="true"></i>
  </label>
  <input v-show="false" type="file" id="fileInput">