如何在 vue 中的非输入元素上捕获 Enter 事件？

Posted 2023-02-16

【中文标题】如何在 vue 中的非输入元素上捕获 Enter 事件？

【英文标题】：How do catch the Enter Event on a non-input element in vue?

【发布时间】：2022-01-09 22:28:28

【问题描述】：

我有一个确认按钮，它也应该由 Enter-Event 触发。

基本上，我希望这可以工作：

<someComponent @keyup.enter="handleConfirm" />
...
methods: 
  handleConfirm(event) 
       console.log("works") 
  

但事实并非如此。显然，这种方法只适用于输入字段。

如何在任何元素/组件上监听 Vue 中的 keyup 事件？

编辑 澄清：任何元素/组件甚至失焦。

【参考方案1】：

点击事件已经通过 ENTER 键触发（在某些浏览器中，它也会通过 Space 触发，例如桌面版 Chrome）。因此，您的代码只需要一个 @click="callEvent" 并且一切正常，因为焦点已经在按钮上

如果你希望任何 ENTER 触发按钮，即使它没有焦点，你应该将事件绑定到窗口对象，这可以在挂载的处理程序中进行

var app = new Vue(
  el: "#app",
  methods: 
    callEvent() 
      console.log("Event called");
    
  ,
  mounted() 
    window.addEventListener('keyup', function(event) 
      if (event.keyCode === 13)  
        app.callEvent();
      
    );
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <button>Enter</button>
</div>

【讨论】：

是后一种情况，所以任何 Enter 事件。它有效，因此您可以从技术上解决问题。话虽如此：难道没有办法不使用window而是使用vue本身来监听enter事件吗？如果不是，我会在几天内将您的答案标记为正确的。

【参考方案2】：

您可以这样做： <someComponent @keyup.enter="handleConfirm($event)" />

methods: 
  handleConfirm(event) 

【讨论】：

不起作用。不确定，也许你以为我没有方法，但我当然有。我编辑问题以澄清这一点。