Bagaimana untuk menyembunyikan fail input dalam vue.js

Cara menyembunyikan fail input dalam vue.js: 1. Tetapkan indeks-z input kepada nombor di atas 1 dan tutupkannya pada kandungan yang perlu diklik; 2. Tetapkan kelegapan gaya daripada input kepada 0 (iaitu. Ketelusan ialah 0. Ia boleh dicetuskan oleh peristiwa perubahan yang terikat pada input.

Persekitaran pengendalian artikel ini: sistem windows10, vue.js 2.9, komputer thinkpad t480.

Secara amnya terdapat tiga cara untuk Vue menyembunyikan fail input Satu ialah menggunakan mekanisme label HTML untuk mencetuskan peristiwa input, satu lagi adalah menggunakan liputan telus input, dan satu lagi adalah menggunakan ref. parameter Vue untuk mengendalikan klik input secara langsung Pencetusan peristiwa dicapai. Jadi bagaimana kita boleh menggunakan tiga kaedah ini untuk menyembunyikan fail input? Mari kita lihat tiga kaedah ini di bawah.

1 Gunakan mekanisme label HTML untuk mencetuskan peristiwa input

Atribut untuk pada label terikat pada id input, dan peristiwa perubahan input boleh dicetuskan. dengan mencetuskan peristiwa klik pada 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 Gunakan liputan lutsinar input

Tetapkan indeks-z input kepada nombor di atas 1 dan tutupkannya pada kandungan yang memerlukan. untuk diklik, dan tetapkan kelegapan gaya input kepada 0 (iaitu ketelusan ialah 0), supaya ia dicetuskan oleh peristiwa perubahan yang terikat pada 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. Gunakan parameter ref vue untuk mengendalikan acara klik input secara langsung untuk mencetuskan

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

Pembelajaran yang disyorkan: latihan php

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan fail input dalam vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!