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