vue中回车键登录

created() {
    let that = this;
    document.onkeypress = function(e) {
      var keycode = document.all ? event.keyCode : e.which;
      if (keycode == ) {
        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="" 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