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

最新推荐文章于 2024-12-18 10:48:03 发布

转载最新推荐文章于 2024-12-18 10:48:03 发布 · 1.4w 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

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

收录于

当前文章被以下社区和专栏收录：

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

一、给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()
                }  
            }
}