如何在不使用input元素的情况下捕获Vuejs中的任何按键事件

时间:2016-10-27 11:23:27

标签: javascript vue-resource vue.js

我正在制作一种游戏,我想让用户输入一个特定的单词,然后我想检查是否按下了特定的单词。如果单词被按下,我将获取下一个单词。目前我正在使用表单,并使用了如下所示的 v-model

i

在Vue实例中,我使用了 watch 属性,该属性会不断检查输入的单词是否与询问的单词匹配。

 <input v-model="inputSpell">

我想到了三个想法:

  1. 上面我正在做的是显示表单。用户输入该表单中的单词。看起来不太好看。

  2. 在加载游戏时隐藏输入元素并将其关注。但缺点是如果用户点击页面上的任何地方,表单上的焦点将会丢失。

  3. 制作自定义指令或调用捕获按键事件的方法以检查单词。

  4. 任何帮助将不胜感激。

    感谢。

1 个答案:

答案 0 :(得分:6)

要在不使用输入的情况下捕获按键,您可以在生命周期挂钩中包含标准事件侦听器(例如,#34;已挂载&#34;),如下所示:

mounted() {

    let self = this; 

    window.addEventListener('keyup', function(ev) {
        self.myMethod(ev); // declared in your component methods
    });
}