How to hide input file in vue.js

Vue.js method to hide the input file: 1. Set the z-index of the input to a number above 1 and cover it on the content that needs to be clicked; 2. Set the style opacity of the input to 0 (i.e. The transparency is 0); 3. It can be triggered by the change event bound to the input.

The operating environment of this article: windows10 system, vue.js 2.9, thinkpad t480 computer.

There are generally three ways for vue to hide input files. One is to use the label mechanism of HTML to trigger the input event, the other is to use input transparent coverage, and the other is to use the ref parameter of vue to directly operate the input click. Event triggering is achieved. So how do we use these three methods to hide the input file? Let’s take a look at these three methods below.

1. Use the label mechanism of HTML to trigger the input event

The for attribute on the label is bound to the id of the input, and the change event of the input can be triggered by triggering the click event on the label

<el-link type="primary">
　　<label for="recordExcel">上传文件|</label>
</el-link>
<form id="recordExcelForm" style="display:none">
　　 <input type="file" id="recordExcel" name="recordExcel" @change="fileChange" />
</form>fileChange(){};//

2. Use input transparent overlay

Set the z-index of the input to a number above 1 and cover it on the content that needs to be clicked. Set the style opacity of the input to 0 (that is, transparency is 0), so that it is triggered by the change event bound to the input

<p class="uploadImg">
  <input type="file" @change="picUpload($event)" accept="image/*" /></p>

.uploadImg {
  width: 100%;
  height: 1.46rem;
  position: relative;
  input {
   width: 1.46rem;
   height: 100%;
   z-index: 1;
   opacity: 0;
   position: absolute;
   cursor: pointer;
  }
}

3,Use the ref parameter of vue to directly operate the click event of the input to trigger

<div class="upload-btn-box">
　 <Button @click="choiceImg" icon="ios-cloud-upload-outline" type="primary">点击上传</Button>
  <input ref="filElem" type="file" class="upload-file" @change="getFile" style="display:none"> 
</div>  
choiceImg(){ this.$refs.filElem.dispatchEvent(new MouseEvent(&#39;click&#39;)) }
getFile(){ console.log("成功"); }

Recommended Learning: php training

The above is the detailed content of How to hide input file in vue.js. For more information, please follow other related articles on the PHP Chinese website!