在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表带模式，我将感谢您的建议。谢谢。

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>

​

Answer 2

最简单的方法

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

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

Answer 3

或者，您可能想要考虑在Vue (docs，github)中使用v-hotkey指令进行键输入。如果您必须考虑几个不同的键输入，这将使您的代码相对干净和简单。

1.安装：

npm i --save v-hotkey

1. 会让Vue 'use‘它：

从“v- VueHotkey”导入热键；Vue.use(VueHotkey);

3.您可以将其应用于您的Vue组件，如下所示：

<template>
    <modal-window ... v-hotkey="keymap">
       ...
    </modal-window>
</template>
<script>
  ...
  data() {
    return {
      showModal: false
    };
  },
  computed: {
    keymap() {
      return {
        "esc": this.toggleModal
      };
    }
  },
  methods: {
    toggleModal() {
      this.showModal = !this.showModal;
    }
  }
</script>