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

Posted 2023-02-22

【中文标题】如何在不使用输入元素的情况下捕获 Vuejs 中的任何按键事件

【英文标题】：How to capture any keypress event in Vuejs without using input element

【发布时间】：2017-03-10 01:36:18

【问题描述】：

我正在制作一种游戏，我希望用户输入特定的单词，然后我想检查是否按下了特定的单词。如果该单词被按下，我将获取下一个单词。目前我正在使用一个表单并使用了如下所示的 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', '');
        
    

我想到了三个想法：

以上方式我正在做的是显示表单。用户以该形式输入单词。不好看。

将输入元素隐藏并在游戏加载时将注意力集中在它上面。但缺点是如果用户单击页面上的任何位置，表单上的焦点将丢失。

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

任何帮助将不胜感激。

谢谢。

【问题讨论】：

使用VueJS Key Modifiers。对于任何密钥使用：v-on.keyup="someMethod()"。 @imcvampire 您的链接与 VueJS 完全无关。

【参考方案1】：

您可能希望在创建组件时添加事件侦听器，并希望在组件销毁时删除它。否则，如果组件在会话中多次加载，则会有多个重复的事件侦听器对单个事件做出反应。

methods: 
    keyDownHandler(e) 
        console.log(e.key)
        // Your handler code here
    ,
,
created() 
    window.addEventListener('keydown', this.keyDownHandler)
,
destroyed() 
    window.removeEventListener('keydown', this.keyDownHandler)
,

【参考方案2】：

要在不使用输入的情况下捕获按键，您可以在生命周期挂钩（例如“mounted”）中包含一个标准事件侦听器，如下所示：

mounted() 

    let self = this; 

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

【讨论】：

为什么我们需要这条线：let self = this; ?

@AlejandroCamus 或 this 内的 function(ev) 将指向函数本身。其实我们可以使用箭头函数来避免这种情况。