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

Question

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

基本上，我希望这能奏效：

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

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

我如何在任何 element/component 上收听 Vue 中的 keyup 事件？

编辑澄清一下：任何 element/component 甚至失焦。

Answer 1

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

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

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>

Answer 2

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

methods: {
  handleConfirm(event) {}
}

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

How do catch the Enter Event on a non-input element in vue?

vue.js

vue-component

vuejs2