Question

我正在构建我的第一个Vue.js项目，我想通过左右键盘箭头键在页面（上一页/下一页）之间导航。

我创建了a simple alert test（并在我的询问的底部附加了我的代码）来演示我面临的问题。使用v-on:click时，我创建的警报方法可以很好地工作。我尝试使用v-on:keyup，v-on:keydown和v-on:keypress，但没有一个选项会触发警报以指示箭头键功能正在起作用。

我发现了这个3+ year old thread，其中详述了类似的问题，并且其中一个评论描述了自v1.0.0起我正在使用的方法作为有效的解决方案。我已经检查了the key modifier documentation的当前版本的Vue，似乎我所做的一切都正确。

我很可能缺少一些关键的东西，但是经过大量的实验和研究，我可以使用一些帮助。预先感谢！

new Vue({
  el: "#app",
  methods: {
  	popupLeft: function(){
    	alert("You have gone to the previous page");
    },
    
    popupRight: function(){
    	alert("You have gone to the next page");
    },
    
    popupClose: function(){
    	alert("You have closed this page");
    },
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<div id="app">
  <button @keyup.left="popupLeft">Prev Page</button>
  <button @keyup.right="popupRight">Next Page</button>
  <button @click="popupClose">Close Page</button>
</div>

Answer 1

您的代码按预期工作。

如果转到上面的示例的JSFiddle，首先单击按钮，然后使用箭头-它将调用相应的事件。

原因是您已将@keyup个侦听器添加到按钮上，这意味着，只有button元素处于焦点并且@keyup事件被触发时，该事件才会得到处理。

为了使用箭头导航，应该从keyup或keydown处理window（或我首选document）事件。

为此，应在本机事件侦听器中添加组件的处理程序：

JSFiddle

vue.js箭头键绑定问题

1 个答案: