vue中给buttion按钮添加键盘回车（enter）事件_vue 回车 button_依旧平凡的博客-CSDN博客

来源： vue中给buttion按钮添加键盘回车（enter）事件_vue 回车 button_依旧平凡的博客-CSDN博客

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

以下代码可实现此功能。

首先，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

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

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

1. // 创建时
2. created(){
3. this.keyupEnter()//页面在创建时就调用键盘的回车事件，在结构代码中也可以不写@keyup.enter.native=”handleAddBook”
4. },
6. methods:{
7. keyupEnter(){
8. document.onkeydown = e =>{
9. let body = document.getElementsByTagName(‘body’)[0]
10. if (e.keyCode === 13 && e.target.baseURI.match(/inputbook/) && e.target === body) {
11. console.log(‘enter’) // match(此处应填写文件在浏览器中的地址，如 ‘/home/index’)
12. this.handleAddBook()
13. }
14. }
15. },
16. handleAddBook(){
17. if(this.validate()){
18. this._printQrcode()
19. }
20. }
21. }

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