vue中给buttion按钮添加键盘回车（enter）事件

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

以下代码可实现此功能。

首先，button上有click事件，点击可实现搜索查询；

created(){}函数里面调用回车按下的事件方法

关键的地方就是按下回车键的方法

methods:{
 keyupEnter(){
   document.onkeydown = e =>{
      let body = document.getElementsByTagName('body')[0]
        if (e.keyCode === 13 && e.target.baseURI.match(/inputbook/) && e.target === body) {
           console.log('enter') // match(此处应填写文件在浏览器中的地址，如 '/home/index')，不写的话，其他页面也会有调用回车按下的方法
           this.handleAddBook() //调用查询方法
         }
       }
    },
    handleAddBook(){
      
    }
}

示例代码如下：

一、第一步： 给button按钮绑定@keyup.enter

<div class="btn"> <!--如果是封装过的按钮，不是原生的按钮，需要加上.native才能生效-->        <Button  type="primary" @click="handleAddBook" @keyup.enter.native="handleAddBook">录入</Button> </div>

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

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

转载于:https://www.cnblogs.com/wangdashi/p/9646219.html