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

Question

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

 <input v-model="inputSpell">

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

watch : {

    inputSpell : function() {
        var spellCount = this.spellCount;
        var inputSpell = this.inputSpell.toUpperCase();
        var presentSpell = this.presentSpell;

        console.log("Spell Count " + spellCount);
        console.log("Input Spell " + inputSpell);
        console.log("Present Spell" + presentSpell);

        if (inputSpell.length === 3 && inputSpell === presentSpell) {
            this.$set(this, 'inputSpell', '');
            if (spellCount === 3) {
                return this.completeCombo();
            }
            return this.fetchSpell(spellCount);
        }

        if (inputSpell.length >=3) {
            this.$set(this, 'inputSpell', '');
        }
    }
}

我想到了三个想法:

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

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

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

任何帮助将不胜感激.

谢谢.

Answer 1

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

mounted() {

    let self = this; 

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