Vue觸發(fā)隱藏input file的方法實例詳解

更新時間：2019年08月14日 13:49:00 作者：我咯I

這篇文章主要介紹了Vue觸發(fā)隱藏input file的方法實例詳解，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下

1、使用input透明覆蓋法

　　將input的z-index設(shè)置為1以上的數(shù)字并覆蓋到需點擊的內(nèi)容上，將input的樣式opacity設(shè)置為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參數(shù)直接操作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">&#xe612;</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事件 ----推薦

總結(jié)

以上所述是小編給大家介紹的Vue觸發(fā)隱藏input file的方法實例詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

Vue2+Element-ui實現(xiàn)el-table表格自適應(yīng)高度的案例
這篇文章主要介紹了Vue2+Element-ui實現(xiàn)el-table表格自適應(yīng)高度的案例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-06-06
詳解Vue的組件注冊
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能,需要的朋友可以參考下
2023-05-05
vue3如何使用eventBus訂閱發(fā)布模式
EventBus是一種發(fā)布/訂閱事件設(shè)計模式的實踐,下面這篇文章主要給大家介紹了關(guān)于vue3如何使用eventBus訂閱發(fā)布模式的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
Vue引入高德地圖并觸發(fā)實現(xiàn)多個標(biāo)點的示例詳解
這篇文章主要介紹了Vue引入高德地圖并觸發(fā)實現(xiàn)多個標(biāo)點,主要是在public下的index.html中引入地圖，引入組件設(shè)置寬高100%，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-05-05
vue學(xué)習(xí)筆記之給組件綁定原生事件操作示例
這篇文章主要介紹了vue學(xué)習(xí)筆記之給組件綁定原生事件操作,結(jié)合實例形式詳細(xì)分析了vue.js組件綁定原生事件相關(guān)原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下
2020-02-02
Vue組件模板的幾種書寫形式(3種)
這篇文章主要介紹了Vue組件模板的幾種書寫形式(3種)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
vue打包之后配置統(tǒng)一請求地址步驟詳解
這篇文章主要為大家介紹了vue打包之后配置統(tǒng)一請求地址實現(xiàn)步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
Element-ui el-tree新增和刪除節(jié)點后如何刷新tree的實例
這篇文章主要介紹了Element-ui el-tree新增和刪除節(jié)點后如何刷新tree的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue中el-table和jsplumb實現(xiàn)連線功能
本文主要介紹了el-table和jsplumb實現(xiàn)連線功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
關(guān)于IDEA中的.VUE文件報錯 Export declarations are not supported by cu
這篇文章主要介紹了關(guān)于IDEA中的.VUE文件報錯 Export declarations are not supported by current JavaScript version的問題，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10