vue中回車鍵登陸

created() {
    let that = this;
    document.onkeypress = function(e) {
      var keycode = document.all ? event.keyCode : e.which;
      if (keycode == 13) {
        that.login();// 登陸方法名
         return false;
      }
    };
  }

 以上的代碼，在這幾天測試發現有一個問題，在登陸進系統以後，從首頁切換到其餘界面，點擊回車，會致使界面調整到首頁！

要實現：只在Login界面點擊回車才執行onkeypress方法，其餘的點回車均不觸發(還不明白爲何在其餘界面回車會執行Login界面的created-_-|| )

思路：在Login.vue最外層綁定id，再綁定鍵盤事件。 

$(「#loginDiv」).bind("keypress",toLogin);

測試發現監聽不到按鍵事件，由於div元素無法獲取焦點，但只要爲div元素加上tabIndex屬性就能獲取焦點

<div id="loginDiv" tabIndex=-1></div>

以上方法雖然也能觸發keypress，但還有點瑕疵~ 就是打開登陸頁時，須要鼠標點一下界面，才能觸發keypress！！！

又一思路：界面中須要有一個聚焦，在回車時纔好執行keypress。故在界面中加input文本框，讓無論從哪裏打開或跳到Login.vue都聚焦文本框

因此自定義指令：

 

 <div id="loginDiv" tabindex="1" style="outline:0;" >
    <input type="text" v-focus style="opacity:0;position:absolute;">
</div>

 

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
},

 自定義指令及inserted用法截圖自vue官網文檔以下：

 

 

 

 

解決方法參考自：

https://blog.csdn.net/zh1159007904/article/details/78026517

https://www.cnblogs.com/hjj2ldq/p/7831972.html