vue.jsで入力ファイルを非表示にする方法

入力ファイルを非表示にする Vue.js メソッド: 1. 入力の z-index を 1 より大きい数値に設定し、クリックする必要があるコンテンツを覆います; 2. スタイルの不透明度を設定します入力を 0 (つまり、透明度が 0); 3. 入力にバインドされた変更イベントによってトリガーできます。

#この記事の動作環境: Windows10 システム、vue.js 2.9、thinkpad t480 コンピューター。

vue が入力ファイルを非表示にする方法は一般に 3 つあります。1 つは HTML のラベル メカニズムを使用して入力イベントをトリガーする方法、もう 1 つは入力の透明なカバレッジを使用する方法、もう 1 つは ref を使用する方法です。 vueのパラメータを入力することでクリック入力を直接操作することでイベントトリガーを実現します。では、これら 3 つの方法を使用して入力ファイルを非表示にするにはどうすればよいでしょうか?以下でこれら 3 つの方法を見てみましょう。

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,

次の ref パラメーターを使用します。入力のクリック イベントを直接操作してトリガーする vue #

<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 training

以上がvue.jsで入力ファイルを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。