enter对应的keycode_vue 添加enter回车事件

问题所在：今天遇到一个需求，给el-button组件添加点击事件，之前对这块一直一知半解，所以特此总结一下

解决方法：

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符，所以对一个普通的Vue input组件，可以这样实现一个回车事件：

//当点击了回车时，便会调用function函数

但是对于开发来说，键盘事件对应的keyCode比较难记，所以Vue 为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。

(别名可参考：https://blog.csdn.net/qq_38591756/article/details/88732443)

所以上面的代码，等同于：

//当点击了回车时，便会调用function函数

还有一种缩写语法(比较常用)：

//当点击了回车时，便会调用function函数

注意：

但是，如果是在自己封装的组件或者是使用一些第三方的UI库(比如element-ui)时，会发现并不起效果，这时就需要用到.native修饰符了，如：

v-model="inputName"

placeholder="输入你的名称"

@keyup.enter.native="searchPerson"

>

在使用过程中，如果页面只针对一个Input添加键盘enter事件，可以按照上面的情况解决。但是如果是要对页面的button添加enter键盘事件，就不能写在input或者button上，因为获取不到焦点，这时候可以直接写在created或者mounted里，直接绑定在document上。如下：

mounted() {

let that = this

document.onkeydown = function (e) {

e = window.event || e

//保证是在登录页面发出的enter事件

if ((that.$route.path === '/login'||that.$route.path === '/') && (e.code === 'Enter' || e.code === 'enter')) {

//调用登录函数

that.login();

}

}