在vue中点击回车登录

在项目中需要加一个小功能,不用点登录框,直接回车就能登录,
1.@keyup事件
在输入框上面加keyup事件

 <input @keyup.enter="submit">

如果使用element 的

<input @keyup.enter.native="submit">

这种方法具有很大的局限性.需要获得input框的焦点(focus)才能够正常触发,不然就会失效
2.document.addEventListener监听keyup事件
语法如下

element.addEventListener(event, function, useCapture)
//event 必须。字符串，指定事件名。
//function 必须。指定要事件触发时执行的函数。
//useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

1.我们先创建一个键盘按下事件

    enterKey(event) {
      console.log(event.keyCode) //打印出按键的keyCode
       if (event.keyCode === 13) {
       this.login() 
    },

2.监听enterKey事件,并且在mounted中执行

	mounted() {
  	  this.enterKeyup()
    },
    methods:{
        enterKeyup() {
      document.addEventListener("keyup", this.enterKey);
    },
    }

现在已经可以实现按下回车登录了,但是还有一个问题
如果退出再次登录,会发现this.login执行两次,并且随着次数的增加,this.login执行的次数越多,有点类似于setTimeout,需要清除
所以我们需要在创建一个方法

    enterKeyupDestroyed() {
      document.removeEventListener("keyup", this.enterKey);
    },

移除监听事件,然后在页面销毁的时候执行此方法

  destroyed() {
    this.enterKeyupDestroyed()
  },

@keyup方法总结