Vue觸發(fā)隱藏input file的方法實例詳解
更新時間：2019年08月14日 13:49:00 作者：我咯I
這篇文章主要介紹了Vue觸發(fā)隱藏input file的方法實例詳解，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下
1、使用input透明覆蓋法
將input的z-index設置為1以上的數字并覆蓋到需點擊的內容上，將input的樣式opacity設置為0（即為透明度為0），這樣通過綁定在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;
}
}
2、使用vue的ref參數直接操作input的點擊事件觸發(fā)
<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機制觸發(fā)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() {}, //觸發(fā)事件
uploadPic: function() {
console.log('dsa');
}
lable上的for屬性綁定input的id,即可通過觸發(fā)lable上的點擊事件觸發(fā)input的change事件 ----推薦
總結
以上所述是小編給大家介紹的Vue觸發(fā)隱藏input file的方法實例詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
在Vue中,渲染函數是一種用于動態(tài)生成組件的函數,可以將組件的模板代碼編寫為JavaScript代碼,并在運行時進行渲染,下面我們就來看看它的具體用法吧2023-08-08
這篇文章主要介紹了vue中的router-view父子組件傳參方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
vue3+vite:src使用require動態(tài)導入圖片報錯的最新解決方法
這篇文章主要介紹了vue3+vite:src使用require動態(tài)導入圖片報錯和解決方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了使用vue控制元素顯示隱藏方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文通過實例代碼給大家介紹了vue中的ElementUI的使用，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細介紹了vue+spring boot實現校驗碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了vue項目中仿element-ui彈框效果的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
詳解vue中使用axios對同一個接口連續(xù)請求導致返回數據混亂的問題
這篇文章主要介紹了詳解vue中使用axios對同一個接口連續(xù)請求導致返回數據混亂的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了apache和nginx下vue頁面刷新404的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue.js 應用性能優(yōu)化分析以及解決方案，VueJS 是開發(fā)網站最受歡迎、最穩(wěn)定的 JavaScript 框架，但與其他框架一樣，如果您忽略它，性能就會受到影響，下面我們就一起來看看怎么才能讓性能提升吧2021-12-12