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

最后

以上就是含糊手机为你收集整理的vue中给buttion按钮添加键盘回车（enter）事件的全部内容，希望文章能够帮你解决vue中给buttion按钮添加键盘回车（enter）事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。