在 VueJs 中按功能处理按键

Question

在我的组件中，我正在使用 VueStrap 的模态，如下所示：

 <template>
    <modal-window v-model="show" v-on:keyup="keyHandler($event)" @ok="submit()" @cancel="cancel()" @closed="close()" ... >
       ...
    </modal-window>
 ...
</template>
<script>
    ...
    methods: {
       keyHandler (event) {
           console.log(event);
       }
    },...
</script>

我想在打开该模式时处理按键，并确保在按下输入时提交模式或在按下 esc 时关闭模式。

我添加了自定义函数 keyHandler 不幸的是从未触发过。你能告诉我如何修复代码以处理该功能中的按键吗？或者什么时候更好地关闭和提交 vue strap modal 我将不胜感激。谢谢你。

原文由 Denis Stephanov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将事件处理程序附加到 window ，这样您就可以接收所有关键事件并根据您的模态状态采取相应的行动：

 Vue.component('modal', {
  template: '<div>test modal</div>',
});

new Vue({
  el: "#app",
  created() {
    window.addEventListener('keydown', (e) => {
      if (e.key == 'Escape') {
        this.showModal = !this.showModal;
      }
    });
  },
  data: {
    showModal: true
  }
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <modal v-show="showModal"></modal>
</div>

原文由 Amr Noman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

最简单的方法

<input v-on:keyup.13="whatkey()" type="text"> <br>

查找是否按下了 enter 键，然后触发一个名为 whatkey 的方法。

原文由 roblem 发布，翻译遵循 CC BY-SA 4.0 许可协议