Comment masquer le fichier d'entrée dans vue.js

Méthode Vue.js pour masquer le fichier d'entrée : 1. Définissez le z-index de l'entrée sur un nombre supérieur à 1 et recouvrez-le sur le contenu sur lequel il faut cliquer. 2. Définissez l'opacité du style de l'entrée sur 0 ; (c'est-à-dire que la transparence est 0 ); 3. Elle peut être déclenchée par l'événement de changement lié à l'entrée.

L'environnement d'exploitation de cet article : système windows10, vue.js 2.9, ordinateur thinkpad t480.

Vue propose généralement trois façons de masquer le fichier d'entrée. L'une consiste à utiliser le mécanisme d'étiquette du HTML pour déclencher l'événement d'entrée, l'autre consiste à utiliser la couverture transparente d'entrée et l'autre consiste à utiliser le paramètre ref de Vue pour actionner directement le déclencheur d'événement de clic de l'entrée. Alors, comment utiliser ces trois méthodes pour masquer le fichier d’entrée ? Jetons un coup d'œil à ces trois méthodes ci-dessous.

1. Utilisez le mécanisme d'étiquette du HTML pour déclencher l'événement d'entrée.

L'attribut for sur l'étiquette est lié à l'identifiant de l'entrée, et l'événement de changement de l'entrée peut être déclenché en déclenchant l'événement click sur le. 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. Utilisez la superposition transparente d'entrée

Définissez l'index z de l'entrée sur un nombre supérieur à 1 et recouvrez-le sur le contenu sur lequel il faut cliquer. Définissez l'opacité du style de l'entrée sur 0 (c'est-à-dire). c'est-à-dire que la transparence est de 0), de sorte qu'il soit déclenché par l'événement de changement lié à l'entrée

<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 Utilisez le paramètre ref de vue pour faire fonctionner directement le déclencheur d'événement de clic d'entrée

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

Apprentissage recommandé : php. formation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!