vue 回车查询 按钮_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

二、第二步：浏览器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://blog.csdn.net/yijiupingfan0914/article/details/105228082