我正在制作一种游戏,我希望用户输入特定的单词,然后我想检查是否按下了特定的单词。如果按下该单词,我将获取下一个单词。目前我正在使用表格并使用过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', '');
}
}
}
我想到了三个想法:
上面我正在做的是显示表格。用户以该形式输入单词。看起来不太好。
隐藏输入元素并在游戏加载时将焦点放在它上面。但缺点是,如果用户单击页面上的任意位置,则表单上的焦点将会丢失。
制作自定义指令或调用捕获按键事件的方法来检查单词。
任何帮助将不胜感激。
Thanks.
要在不使用输入的情况下捕获按键,您可以在生命周期挂钩(例如“mounted”)中包含一个标准事件侦听器,如下所示:
mounted() {
let self = this;
window.addEventListener('keyup', function(ev) {
self.myMethod(ev); // declared in your component methods
});
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)