一篇文章教你實現(xiàn)VUE多個DIV,button綁定回車事件
更新時間：2021年10月13日 15:15:42 作者：yinxu_csdn
這篇文章主要介紹了VUE多個DIV綁定回車事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
目前有個需求是這樣的，點擊確定按鈕或鍵盤回車時執(zhí)行操作，很多地方都需要用到。
試了幾種方法均不行，
首先，我在div（button也一樣）上 綁定@keyup.enter方法，完全沒效果，然后按照網(wǎng)上的方法，這樣寫：
<div class="btn submit" @keyup.enter="submit" @click="submit">確定（Ent）</div>
created(){
document.onkeydown = function(e) {
if(e.keyCode == 13){
console.log("調(diào)用需要執(zhí)行的方法");
}
}
},
這樣確實可以實現(xiàn)回車事件，但是這是全局的，也就是說，你在其他組件回車時也會調(diào)用此處的回車事件，此方法不行。
然后我是這樣做的：
1.在確定按鈕和取消按鈕中間添加個<input>標簽（放在中間可以當按鈕的間隔，就不用寫margin-left了），然后給這個input標簽加上@keyup.enter事件；
<template slot="footer">
<div class="dialog-footer dis-flex">
<div class="btn cancel" @click="showDialog = false">取消（Esc）</div>
<input
type="text"
ref="inputdata"
class="hiddenIpt"
@keyup.enter="submit"
/>
<div class="btn submit" @click="submit">
確定（Ent）
</div>
</div>
</template>
2.寫個監(jiān)聽器，監(jiān)聽到彈窗打開時，給input框自動聚焦（ inputdata 是 input 上用 ref 綁定的）。
watch: {
showDialog() {
if (this.showDialog) {
//this.$refs.inputdata.focus(); 錯誤寫法
this.$nextTick(() => {//正確寫法
this.$refs.inputdata.focus();
});
}
},
},
3.隱藏input框（設(shè)置寬度用來當確定按鈕和取消按鈕之間的間隔。）
.hiddenIpt {
width: 2rem;
opacity: 0;
}
就這樣完美解決，有更好的辦法，歡迎溝通交流。
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
基于Vue + Axios實現(xiàn)全局Loading自動顯示關(guān)閉效果
在vue項目中,我們通常會使用Axios來與后臺進行數(shù)據(jù)交互,而當我們發(fā)起請求時,常常需要在頁面上顯示一個加載框（Loading）,然后等數(shù)據(jù)返回后自動將其隱藏,本文介紹了基于Vue + Axios實現(xiàn)全局Loading自動顯示關(guān)閉效果,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細介紹了vue如何實現(xiàn)將后端返回的二進制流進行處理并實現(xiàn)下載,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
這篇文章主要介紹了vue setInterval 定時器失效的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
圖形驗證碼是一種常見的安全措施,用于防止自動化軟件（機器人）濫用網(wǎng)站資源,如自動提交表單,這篇文章主要介紹了在uniapp中實現(xiàn)圖形驗證碼的詳細步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-11-11
Blob?對象表示一個不可變、原始數(shù)據(jù)的類文件對象，這篇文章主要介紹了vue使用blob下載文件遇到的問題記錄,需要的朋友可以參考下2024-02-02
今天小編就為大家分享一篇vue實例中data使用return包裹的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了vue自定義封裝按鈕組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章主要介紹了關(guān)于Vue背景圖打包之后訪問路徑錯誤問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了Vue項目通過network的ip地址訪問注意事項及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
我們在前端開發(fā)中經(jīng)?？吹?visible.sync這種修飾符，很多人不知道這是干什么的，在使用ElementUI的時候，里面有個彈窗el-dialog組件的時候會有用到:visible.sync，今天小編帶領(lǐng)大家學(xué)習(xí)下:visible.sync 的作用，感興趣的朋友一起看看吧2022-11-11