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

【问题标题】：How do catch the Enter Event on a non-input element in vue?如何在 vue 中的非输入元素上捕获 Enter 事件？
【发布时间】：2022-01-09 22:28:28
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案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) {}
}

【讨论】：

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