Vue觸發隱藏input file的方法
阿新 • • 發佈:2020-07-17
Vue觸發隱藏input file的方法
1、使用input透明覆蓋法
將input的z-index設定為1以上的數字並覆蓋到需點選的內容上,將input的樣式opacity設定為0(即為透明度為0),這樣通過繫結在input上的change事件觸發 ----推薦
<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; } }
2、使用vue的ref引數直接操作input的點選事件觸發
<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"> </div> choiceImg(){ this.$refs.filElem.dispatchEvent(new MouseEvent('click')) }, getFile(){ console.log("成功"); }
3、使用HTML的lable機制觸發input事件
<label for="upfile" class="pTitleRight" @click="IDRecognition"> <span>身份證識別</span> <i class="iconfont"></i> <input ref="filElem" type="file" accept="image/*" id="upfile" name="upfile" style="display: none;" @change="uploadPic"> </label>
IDRecognition: function() {}, //觸發事件
uploadPic: function() {
console.log('dsa');
}
lable上的for屬性繫結input的id,即可通過觸發lable上的點選事件觸發input的change事件 ----推薦
轉載自https://www.cnblogs.com/wangjishu/p/11350999.html
實際上,第三種方法會有莫名奇妙的bug,原因不得而知
暫且記錄一下,以後再來完善。