vue.js에서 입력 파일을 숨기는 방법

Vue.js 입력 파일을 숨기는 방법: 1. 입력의 z-index를 1보다 큰 숫자로 설정하고 클릭해야 하는 콘텐츠에 덮습니다. 2. 입력의 스타일 불투명도를 0으로 설정합니다. (즉, 투명도는 0 입니다.) 3. 입력에 바인딩된 변경 이벤트에 의해 트리거될 수 있습니다.

이 기사의 운영 환경: windows10 시스템, vue.js 2.9, thinkpad t480 컴퓨터.

Vue에는 일반적으로 입력 파일을 숨기는 세 가지 방법이 있습니다. 하나는 HTML의 레이블 메커니즘을 사용하여 입력 이벤트를 트리거하는 것이고, 다른 하나는 입력 투명 범위를 사용하는 것이고, 다른 하나는 Vue의 ref 매개변수를 사용하는 것입니다. 입력의 클릭 이벤트 트리거를 직접 조작합니다. 그렇다면 이 세 가지 방법을 사용하여 입력 파일을 숨기는 방법은 무엇일까요? 아래에서 세 가지 방법을 살펴보겠습니다.

1. HTML의 레이블 메커니즘을 사용하여 입력 이벤트를 트리거합니다.

레이블의 for 속성은 입력의 ID에 바인딩되며 입력의 변경 이벤트는 클릭 이벤트를 트리거하여 트리거될 수 있습니다.

<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. 입력 투명 오버레이를 사용하세요

입력의 Z-색인을 1보다 큰 숫자로 설정하고 클릭해야 하는 내용에 입력의 스타일 불투명도를 0으로 설정하세요. 즉, 투명도는 0)이므로 입력에 바인딩된 변경 이벤트에 의해 트리거됩니다

<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. vue의 ref 매개변수를 사용하여 입력 클릭 이벤트 트리거를 직접 조작합니다

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

추천 학습: php 훈련

위 내용은 vue.js에서 입력 파일을 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!