vue：添加enter事件，键盘敲下enter事件

vue项目中遇到点击查询按钮可以查出数据，点击回车键也能查出数据，所以就想点击回车键时调用查询方法。

示例代码如下：

一、第一步： 给input按钮绑定@keyup.enter；如果是要对页面的button添加enter键盘事件，就不能写在input或者button上，因为获取不到焦点，这时候可以直接写在created或者mounted里，直接绑定在document上。

  <div class="btn"> 
     <input  type="primary"  @keyup.enter.native="handleAddBook" /> <span @click="handleAddBook">查询span>
  div>

二、第二步：浏览器url：event.target.baseURI; 获取浏览器的路径地址

 // 创建时
    created(){
        this.enterEvent()//页面在创建时就调用键盘的回车事件，在结构代码中也可以不写@keyup.enter.native="handleAddBook"
     },
     
     methods:{
          enterEvent(){
              document.onkeydown = e =>{
                  let body = document.getElementsByTagName('body')[0]
                    if (e.keyCode === 13 && e.target.baseURI.match(/inputbook/) && e.target === body) {
                 // match(此处应填写文件在浏览器中的地址，如 '/home/index')，不写的话，其他页面也会有调用回车按下的方法
                          console.log('enter');
                          this.handleAddBook(); //调用查询方法
                      }
                    }
           },
           handleAddBook(){
               console.log('查询');
           }
    }

vue监听键盘回车事件:

vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符：
！！！使用 keyCode attribute 也是允许的：不过已经被淘汰了了解一下就行了。

<input v-on:keyup.13="submit">

vue还非常贴心地给出了常用按键的别名，这样就不必去记keyCode ~ ~

上面代码，还可以在这样写：

 <input v-on:keyup.enter="submit">
     
 <input @keyup.enter="submit">

注意！！！如果用了封装组件的话，比如elementUi，这个时候使用按键修饰符需要加上.native

比如：

<el-input v-on:keyup.native.13="search()">el-input>
<el-input v-model="account" placeholder="请输入账号" @keyup.enter.native="search()">el-input>

其它：

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete（捕获删除或者“退格键”）
.esc
.space
.up
.down
.left
.right

有一些按键（.esc以及所有的方向键）在IE9中有不同的key值，如果你想支持IE9，这些内置的别名应该是首选：
还可以通过参考config.keyCodes对象自定义按键修饰符别名

其他参照文档

可能会出现的bug：键盘回车事件导致页面刷新的问题

先在form表单加上@submit.prevent.native ， 然后在所需要操作的input加上@keyup.enter.native和onsubmit="false"
即可。