一篇文章教你實現VUE多個DIV,button綁定回車事件

Posted on by

目前有個需求是這樣的，點擊確定按鈕或鍵盤回車時執行操作，很多地方都需要用到。

試瞭幾種方法均不行，

首先，我在div（button也一樣）上 綁定@keyup.enter方法，完全沒效果，然後按照網上的方法，這樣寫：

<div class="btn submit" @keyup.enter="submit" @click="submit">確定（Ent）</div>
created(){
   document.onkeydown = function(e) {
     if(e.keyCode == 13){
       console.log("調用需要執行的方法"); 
     }
   }
 },

這樣確實可以實現回車事件，但是這是全局的，也就是說，你在其他組件回車時也會調用此處的回車事件，此方法不行。

然後我是這樣做的：

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.寫個監聽器，監聽到彈窗打開時，給input框自動聚焦（ inputdata 是 input 上用 ref 綁定的）。

watch: {
    showDialog() {
      if (this.showDialog) {
        //this.$refs.inputdata.focus(); 錯誤寫法
        this.$nextTick(() => {//正確寫法
          this.$refs.inputdata.focus();
        });
      }
    },
  },

3.隱藏input框（設置寬度用來當確定按鈕和取消按鈕之間的間隔。）

.hiddenIpt {
    width: 2rem;
    opacity: 0;
  }

就這樣完美解決，有更好的辦法，歡迎溝通交流。

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容！

推薦閱讀：