VUE实现多个DIV（或button）绑定回车事件

最新推荐文章于 2025-02-14 09:52:55 发布

yinxu_csdn

最新推荐文章于 2025-02-14 09:52:55 发布

阅读量2.3k

点赞数 1

文章标签： vue.js html javascript

本文链接：https://blog.youkuaiyun.com/yinxu_csdn/article/details/120727924

版权

在Vue中，为多个DIV或button实现回车事件触发操作的需求。尝试过直接绑定@keyup.enter无效，全局监听回车事件会导致其他组件受影响。解决方案：在确定和取消按钮间添加隐藏input，利用ref聚焦，并监听弹窗打开时自动聚焦，实现特定元素的回车响应。

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

目前有个需求是这样的，点击确定按钮或键盘回车时执行操作，很多地方都需要用到。

试了几种方法均不行，

首先，我在div（button也一样）上绑定@keyup.enter方法，完全没效果，然后按照网上的方法，这样写：

<div class="btn submit" @keyup.enter="submit" @click="submit">确定（Ent）</div>

created(){
   document.onkeydown = function(e) {
     if(e.keyCode == 13){
       console.log("调用需要执行的方法"); 
     }
   }
 },

这样确实可以实现回车事件，但是这是全局的，也就是说，你在其他组件回车时也会调用此处的回车事件，此方法不行。

然后我是这样做的：

1.在确定按钮和取消按钮中间添加个<input>标签（放在中间可以当按钮的间隔，就不用写margin-left了），然后给这个input标签加上@keyup.enter事件；

<template slot="footer">
        <div class=&#