您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“vue.js如何隱藏input file”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue.js如何隱藏input file”這篇文章吧。
vue.js隱藏input file的方法:1、將input的z-index設(shè)置為1以上的數(shù)字并覆蓋到需要點(diǎn)擊的內(nèi)容上;2、將input的樣式opacity設(shè)置為0(即為透明度為0);3、通過(guò)綁定在input上的change事件觸發(fā)即可。
本文操作環(huán)境:windows10系統(tǒng)、vue.js 2.9、thinkpad t480電腦。
vue隱藏input file一般有三種方式,一種是使用HTML的lable機(jī)制觸發(fā)input事件,一種是使用使用input透明覆蓋,還有一種是使用vue的ref參數(shù)直接操作input的點(diǎn)擊事件觸發(fā)來(lái)實(shí)現(xiàn)。那么我們?cè)撊绾问褂眠@三種方式來(lái)實(shí)現(xiàn)隱藏input file呢?下面我們就來(lái)一起看看這三種方法。
1、使用HTML的lable機(jī)制觸發(fā)input事件
lable上的for屬性綁定input的id,即可通過(guò)觸發(fā)lable上的點(diǎn)擊事件觸發(fā)input的change事件
<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、使用使用input透明覆蓋
將input的z-index設(shè)置為1以上的數(shù)字并覆蓋到需點(diǎn)擊的內(nèi)容上,將input的樣式opacity設(shè)置為0(即為透明度為0),這樣通過(guò)綁定在input上的change事件觸發(fā)
<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參數(shù)直接操作input的點(diǎn)擊事件觸發(fā)
<div class="upload-btn-box"> <Button @click="choiceImg" icon="ios-cloud-upload-outline" type="primary">點(diǎn)擊上傳</Button> <input ref="filElem" type="file" class="upload-file" @change="getFile" style="display:none"> </div> choiceImg(){ this.$refs.filElem.dispatchEvent(new MouseEvent('click')) } getFile(){ console.log("成功"); }
以上是“vue.js如何隱藏input file”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。