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

weixin_30827565

于 2018-09-14 14:06:00 发布

阅读量1.4w

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/wangdashi/p/9646219.html

本文介绍如何在Vue项目中为Button组件绑定Enter键事件，实现键盘操作触发按钮功能。同时，展示了如何利用JavaScript检测浏览器URL，结合键盘事件实现特定页面的功能响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<div class="btn">
       <Button  type="primary" @click="handleAddBook" @keyup.enter="handleAddBook">录入</Button>
</div>

二、浏览器url：event.target.baseURI;

created(){

       this.keyupEnter()
 },
 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')
                        this.handleAddBook()
                    }
                }
            },
            handleAddBook(){
                if(this.validate()){
                    this._printQrcode()
                }  
            }
}