So verbergen Sie die Eingabedatei in vue.js

Vue.js-Methode zum Ausblenden der Eingabedatei: 1. Setzen Sie den Z-Index der Eingabe auf eine Zahl über 1 und decken Sie ihn mit dem Inhalt ab, der angeklickt werden muss. 2. Setzen Sie die Stildeckkraft der Eingabe auf 0 (das heißt, die Transparenz ist 0); 3. Sie kann durch das an die Eingabe gebundene Änderungsereignis ausgelöst werden.

Die Betriebsumgebung dieses Artikels: Windows10-System, vue.js 2.9, Thinkpad T480-Computer.

Vue bietet im Allgemeinen drei Möglichkeiten, die Eingabedatei auszublenden. Eine besteht darin, den Beschriftungsmechanismus von HTML zu verwenden, um das Eingabeereignis auszulösen, die andere darin, die transparente Eingabeabdeckung zu verwenden, und die andere darin, den Ref-Parameter von Vue zu verwenden Betätigen Sie direkt den Klickereignisauslöser des Eingangs. Wie verwenden wir diese drei Methoden, um die Eingabedatei auszublenden? Werfen wir einen Blick auf diese drei Methoden unten.

1. Verwenden Sie den Label-Mechanismus von HTML, um das Eingabeereignis auszulösen.

Das for-Attribut auf dem Label ist an die ID der Eingabe gebunden, und das Änderungsereignis der Eingabe kann durch Auslösen des Klickereignisses ausgelöst werden Beschriftung.

<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. Verwenden Sie die transparente Eingabeüberlagerung.

Setzen Sie den Z-Index der Eingabe auf eine Zahl über 1 und decken Sie ihn auf dem Inhalt ab, der angeklickt werden muss ist, die Transparenz ist 0), sodass es durch das an die Eingabe gebundene Änderungsereignis ausgelöst wird

<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

Verwenden Sie den Ref-Parameter von Vue, um den Eingabeklick-Ereignisauslöser direkt zu bedienen

<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("成功"); }

Empfohlenes Lernen:

php Ausbildung

Das obige ist der detaillierte Inhalt vonSo verbergen Sie die Eingabedatei in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!